|
| 1 | +import { Tabs } from '@aws-amplify/ui-react'; |
| 2 | + |
1 | 3 | ## Authenticator Container, Header & Footer Slots |
2 | 4 |
|
3 | 5 | The Authenticator has several "slots" that you can customize to add messaging & functionality to meet your app's needs. |
@@ -30,3 +32,68 @@ The `Authenticator` subcomponents can be overridden allowing for advanced use ca |
30 | 32 | ```jsx expoSnack file=../../../../../../../examples/react-native/src/features/Authenticator/Component/Example.tsx |
31 | 33 |
|
32 | 34 | ``` |
| 35 | + |
| 36 | +### Override components with third-party component library |
| 37 | +The following example shows how to override each component in the Authenticator to produce a distinct look and feel using a third-party component library. |
| 38 | + |
| 39 | +<Tabs.Container defaultValue="example"> |
| 40 | + <Tabs.List style={{ overflowX: 'scroll', paddingBottom: 8 }}> |
| 41 | + <Tabs.Item value="example">Example.tsx</Tabs.Item> |
| 42 | + <Tabs.Item value="confirm-reset-password"> |
| 43 | + ConfirmResetPassword.tsx |
| 44 | + </Tabs.Item> |
| 45 | + <Tabs.Item value="confirm-sign-in">ConfirmSignIn.tsx</Tabs.Item> |
| 46 | + <Tabs.Item value="confirm-verify-user">ConfirmVerifyUser.tsx</Tabs.Item> |
| 47 | + <Tabs.Item value="force-new-password">ForceNewPassword.tsx</Tabs.Item> |
| 48 | + <Tabs.Item value="forgot-password">ForgotPassword.tsx</Tabs.Item> |
| 49 | + <Tabs.Item value="setup-totp">SetupTotp.tsx</Tabs.Item> |
| 50 | + <Tabs.Item value="sign-in">SignIn.tsx</Tabs.Item> |
| 51 | + <Tabs.Item value="sign-up">SignUp.tsx</Tabs.Item> |
| 52 | + <Tabs.Item value="verify-user">VerifyUser.tsx</Tabs.Item> |
| 53 | + <Tabs.Item value="components">components.tsx</Tabs.Item> |
| 54 | + </Tabs.List> |
| 55 | + <Tabs.Panel value="example"> |
| 56 | + ```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideComponents/Example.tsx |
| 57 | + ``` |
| 58 | + </Tabs.Panel> |
| 59 | + <Tabs.Panel value="confirm-reset-password"> |
| 60 | + ```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideComponents/ConfirmResetPassword.tsx |
| 61 | + ``` |
| 62 | + </Tabs.Panel> |
| 63 | + <Tabs.Panel value="confirm-sign-in"> |
| 64 | + ```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideComponents/ConfirmSignIn.tsx |
| 65 | + ``` |
| 66 | + </Tabs.Panel> |
| 67 | + <Tabs.Panel value="confirm-verify-user"> |
| 68 | + ```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideComponents/ConfirmVerifyUser.tsx |
| 69 | + ``` |
| 70 | + </Tabs.Panel> |
| 71 | + <Tabs.Panel value="force-new-password"> |
| 72 | + ```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideComponents/ForceNewPassword.tsx |
| 73 | + ``` |
| 74 | + </Tabs.Panel> |
| 75 | + <Tabs.Panel value="forgot-password"> |
| 76 | + ```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideComponents/ForgotPassword.tsx |
| 77 | + ``` |
| 78 | + </Tabs.Panel> |
| 79 | + <Tabs.Panel value="setup-totp"> |
| 80 | + ```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideComponents/SetupTotp.tsx |
| 81 | + ``` |
| 82 | + </Tabs.Panel> |
| 83 | + <Tabs.Panel value="sign-in"> |
| 84 | + ```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideComponents/SignIn.tsx |
| 85 | + ``` |
| 86 | + </Tabs.Panel> |
| 87 | + <Tabs.Panel value="sign-up"> |
| 88 | + ```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideComponents/SignUp.tsx |
| 89 | + ``` |
| 90 | + </Tabs.Panel> |
| 91 | + <Tabs.Panel value="verify-user"> |
| 92 | + ```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideComponents/VerifyUser.tsx |
| 93 | + ``` |
| 94 | + </Tabs.Panel> |
| 95 | + <Tabs.Panel value="components"> |
| 96 | + ```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/OverrideComponents/components.tsx |
| 97 | + ``` |
| 98 | + </Tabs.Panel> |
| 99 | +</Tabs.Container> |
0 commit comments