Skip to content

Commit fa7babd

Browse files
hbuchelHeather Buchel
hbuchel
and
Heather Buchel
authored
docs: add usage page and refactor installation page (#1976)
* add usage page and refactor installation page Co-authored-by: Heather Buchel <[email protected]>
1 parent 7dc6177 commit fa7babd

File tree

10 files changed

+89
-93
lines changed

10 files changed

+89
-93
lines changed

‎docs/src/components/Layout/SecondaryNav.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,9 @@ export const SecondaryNav = (props) => {
136136
<NavLink {...props} href="/getting-started/installation">
137137
Installation
138138
</NavLink>
139+
<NavLink {...props} href="/getting-started/usage">
140+
Usage
141+
</NavLink>
139142
{platform !== 'flutter' && (
140143
<NavLink {...props} href="/getting-started/migration">
141144
Migration

‎docs/src/components/Layout/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ export default function Page({
138138
<Footer />
139139
</main>
140140

141-
{hideToc ? null : (
141+
{!hideToc && headings.length && (
142142
<TableOfContents title="Contents" headings={headings} />
143143
)}
144144
</div>

‎docs/src/pages/[platform]/components/authenticator/advanced/useAuthenticator.react.mdx‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
import { Tabs, TabItem } from '@aws-amplify/ui-react';
2+
13
### useAuthenticator Hook
24

3-
`@aws-amplify/ui-react` ships with `useAuthenticator` React hook that can be used to access, modify, and update Authenticator's auth state. To use them, first wrap your application with `<Authenticator.Provider>`:
5+
`@aws-amplify/ui-react` ships with `useAuthenticator` React hook that can be used to access, modify, and update Authenticator's auth state. To use them, first wrap your application with [`<Authenticator.Provider>`](#authenticator-provider):
46

57
```tsx
68
import { Authenticator } from '@aws-amplify/ui-react';
@@ -23,6 +25,42 @@ const App = () => {
2325
};
2426
```
2527

28+
### Authenticator Provider
29+
30+
In advanced use cases where usage of the [`useAuthenticator` hook](/components/authenticator#useauthenticator-hook) outside the scope of the [`Authenticator`](/components/authenticator) is needed, wrap your application inside an `Authenticator.Provider`. The `Authenticator.Provider` guarantees that the [useAuthenticator hook](/components/authenticator#useauthenticator-hook) is available throughout your application. You can see an example of this pattern in the [Protected Routes Guide.](/guides/auth-protected)
31+
32+
33+
<Tabs>
34+
<TabItem title="Create React App">
35+
```jsx
36+
import { Authenticator, View } from '@aws-amplify/ui-react';
37+
import '@aws-amplify/ui-react/styles.css'; // default theme
38+
39+
export default function App() {
40+
return (
41+
<Authenticator.Provider>
42+
<View>Your app here</View>
43+
</Authenticator.Provider>
44+
);
45+
};
46+
```
47+
</TabItem>
48+
<TabItem title="Next.js" >
49+
```jsx
50+
import { Authenticator } from '@aws-amplify/ui-react';
51+
import '@aws-amplify/ui-react/styles.css'; // default theme
52+
53+
export default function App(props) {
54+
return (
55+
<Authenticator.Provider>
56+
<View {...props}>Your app here</View>
57+
</Authenticator.Provider>
58+
);
59+
};
60+
```
61+
</TabItem>
62+
</Tabs>
63+
2664
### Prevent Re-renders
2765

2866
Using `useAuthenticator` hook at your `App` level is risky, because it'll trigger a re-render down its tree whenever any of its context changes value.

‎docs/src/pages/[platform]/getting-started/installation/dependencies.react.mdx‎

Lines changed: 0 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -21,92 +21,3 @@ yarn add aws-amplify @aws-amplify/ui-react
2121

2222
After adding the `aws-amplify` and `@aws-amplify/ui-react` dependencies you are now ready to add any of our [components](/components) to your application.
2323

24-
### Default styling
25-
26-
Load the default styling by importing our CSS:
27-
28-
```jsx
29-
import { View } from '@aws-amplify/ui-react';
30-
import '@aws-amplify/ui-react/styles.css'; // default theme
31-
32-
export default function App() {
33-
return <View>Your app here</View>;
34-
}
35-
```
36-
37-
### Custom Theme
38-
39-
To add a [custom theme](/theming), wrap your app in the `AmplifyProvider` component and include the default styling.
40-
41-
<Tabs>
42-
<TabItem title="Create React App">
43-
```jsx
44-
import { AmplifyProvider, View } from '@aws-amplify/ui-react';
45-
import '@aws-amplify/ui-react/styles.css'; // default theme
46-
47-
export default function App() {
48-
return (
49-
<AmplifyProvider>
50-
<View>Your app here</View>
51-
</AmplifyProvider>
52-
);
53-
}
54-
55-
````
56-
57-
</TabItem>
58-
<TabItem title="Next.js" >
59-
```jsx
60-
import { AmplifyProvider, View } from '@aws-amplify/ui-react';
61-
import '@aws-amplify/ui-react/styles.css'; // default theme
62-
63-
export default function App(props) {
64-
return (
65-
<AmplifyProvider>
66-
<View {...props} >Your app here </View>
67-
</AmplifyProvider>
68-
);
69-
};
70-
````
71-
72-
</TabItem>
73-
</Tabs>
74-
75-
> The `AmplifyProvider` helps direct [theming](/theming) to all the Amplify components in your application. It can optionally be used with a [theme object](/theming#theme-object), to set the look and feel of your app.
76-
77-
### Authenticator Provider
78-
79-
In advanced use cases where usage of the [`useAuthenticator` hook](/components/authenticator#useauthenticator-hook) outside the scope of the [`Authenticator`](/components/authenticator) is needed, wrap your application inside a `Authenticator.Provider`.
80-
81-
<Tabs>
82-
<TabItem title="Create React App">
83-
```jsx
84-
import { Authenticator, View } from '@aws-amplify/ui-react';
85-
import '@aws-amplify/ui-react/styles.css'; // default theme
86-
87-
export default function App() {
88-
return (
89-
<Authenticator.Provider>
90-
<View>Your app here</View>
91-
</Authenticator.Provider>
92-
);
93-
};
94-
```
95-
</TabItem>
96-
<TabItem title="Next.js" >
97-
```jsx
98-
import { Authenticator } from '@aws-amplify/ui-react';
99-
import '@aws-amplify/ui-react/styles.css'; // default theme
100-
101-
export default function App(props) {
102-
return (
103-
<Authenticator.Provider>
104-
<View {...props}>Your app here</View>
105-
</Authenticator.Provider>
106-
);
107-
};
108-
```
109-
</TabItem>
110-
</Tabs>
111-
112-
> The `Authenticator.Provider` is used with our [Authenticator](/components/authenticator) component. It guarantees that the [useAuthenticator hook](/components/authenticator#useauthenticator-hook) is available throughout your application. You can see an example of this pattern in the [Protected Routes Guide.](/guides/auth-protected)

‎docs/src/pages/[platform]/getting-started/installation/index.page.mdx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
22
title: Installation
3-
metaTitle: Installation
4-
metaDescription: Installation Guide - How to install Amplify UI Packages, Styles, Fonts and Troubleshooting.
3+
metaDescription: Installation Guide - How to install Amplify UI Packages, Styles, and Fonts.
54
supportedFrameworks: all
65
---
76

‎docs/src/pages/[platform]/getting-started/usage/index.page.mdx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
title: Usage
3+
metaDescription: How to get started using Amplify UI.
4+
supportedFrameworks: react|angular|vue
5+
---
6+
7+
import { Fragment } from '@/components/Fragment';
8+
9+
<Fragment>{({ platform }) => import(`./usage.${platform}.mdx`)}</Fragment>

‎docs/src/pages/[platform]/getting-started/usage/usage.angular.mdx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { Alert, Text } from '@aws-amplify/ui-react';
2+
3+
<Alert variation="info" marginBottom="1rem">
4+
<Text>`@aws-amplify/ui-angular` currently only supports our cloud-connected components.</Text>
5+
</Alert>
6+
7+
Please view the [Angular Authenticator](/angular/components/authenticator#quick-start) documentation for a getting started guide.

‎docs/src/pages/[platform]/getting-started/usage/usage.flutter.mdx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { Alert, Text } from '@aws-amplify/ui-react';
2+
3+
<Alert variation="info" marginBottom="1rem">
4+
<Text>The Authenticator is the only supported Amplify UI component for Flutter.</Text>
5+
</Alert>
6+
7+
Please view the [Flutter Authenticator](/flutter/components/authenticator#quick-start) documentation for a getting started guide.

‎docs/src/pages/[platform]/getting-started/usage/usage.react.mdx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Tabs, TabItem } from '@aws-amplify/ui-react';
2+
import { Example, ExampleCode } from '@/components/Example';
3+
4+
## Import styles and components
5+
6+
Load the default styling by importing our CSS:
7+
8+
```jsx
9+
import { View } from '@aws-amplify/ui-react';
10+
import '@aws-amplify/ui-react/styles.css'; // default theme
11+
12+
export default function App() {
13+
return <View>Your app here</View>;
14+
}
15+
```

‎docs/src/pages/[platform]/getting-started/usage/usage.vue.mdx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { Alert, Text } from '@aws-amplify/ui-react';
2+
3+
<Alert variation="info" marginBottom="1rem">
4+
<Text>`@aws-amplify/ui-vue` currently only supports our cloud-connected components.</Text>
5+
</Alert>
6+
7+
Please view the [Vue Authenticator](/vue/components/authenticator#quick-start) documentation for a getting started guide.

0 commit comments

Comments
 (0)