From 68a0e44899320a4c33331a7465db40f1fa4ff7af Mon Sep 17 00:00:00 2001 From: vi Date: Tue, 17 Dec 2024 21:52:48 -0500 Subject: [PATCH] fix code filenames to match quickstart --- docs/references/react/use-auth.mdx | 8 ++++++-- docs/references/react/use-organization-list.mdx | 4 ++-- docs/references/react/use-reverification.mdx | 4 ++-- docs/references/react/use-sign-in.mdx | 6 +++--- docs/references/react/use-sign-up.mdx | 6 +++--- 5 files changed, 16 insertions(+), 12 deletions(-) diff --git a/docs/references/react/use-auth.mdx b/docs/references/react/use-auth.mdx index d4c99a23bd..f05614fa00 100644 --- a/docs/references/react/use-auth.mdx +++ b/docs/references/react/use-auth.mdx @@ -82,7 +82,7 @@ The `useAuth()` hook provides access to the current user's authentication state The following example uses the `useAuth()` hook to fetch data from an external API using a session token. The `getToken()` method is used to retrieve the token. -```tsx {{ filename: 'ExternalDataPage.tsx' }} +```tsx {{ filename: 'src/pages/ExternalDataPage.tsx' }} import { useAuth } from '@clerk/clerk-react' export default function ExternalDataPage() { @@ -109,6 +109,10 @@ export default function ExternalDataPage() { return
Sign in to view this page
} - return
+ return ( +
+ +
+ ) } ``` diff --git a/docs/references/react/use-organization-list.mdx b/docs/references/react/use-organization-list.mdx index 2efd9b2f0b..dd611b8f63 100644 --- a/docs/references/react/use-organization-list.mdx +++ b/docs/references/react/use-organization-list.mdx @@ -215,7 +215,7 @@ const { userMemberships } = useOrganizationList({ The following example demonstrates how to use the `infinite` property to fetch and append new data to the existing list. The `userMemberships` attribute will be populated with the first page of the user's organization memberships. When the "Load more" button is clicked, the `fetchNext` helper function will be called to append the next page of memberships to the list. -```tsx {{ filename: 'app/components/JoinedOrganizations.tsx' }} +```tsx {{ filename: 'src/components/JoinedOrganizations.tsx' }} import { useOrganizationList } from '@clerk/clerk-react' import React from 'react' @@ -257,7 +257,7 @@ The following example demonstrates how to use the `fetchPrevious` and `fetchNext Notice the difference between this example's pagination and the infinite pagination example above. -```tsx {{ filename: 'app/components/UserInvitationsTable.tsx' }} +```tsx {{ filename: 'src/components/UserInvitationsTable.tsx' }} import { useOrganizationList } from '@clerk/clerk-react' import React from 'react' diff --git a/docs/references/react/use-reverification.mdx b/docs/references/react/use-reverification.mdx index f0514aafa8..4361f3cd92 100644 --- a/docs/references/react/use-reverification.mdx +++ b/docs/references/react/use-reverification.mdx @@ -54,7 +54,7 @@ The following example demonstrates how to handle scenarios where a user cancels In the following example, `myFetcher` would be a function in your backend that fetches data from the route that requires reverification. See the [guide on how to require reverification](/docs/guides/reverification) for more information. -```tsx {{ filename: 'MyButton.tsx' }} +```tsx {{ filename: 'src/components/MyButton.tsx' }} import { useReverification } from '@clerk/react' export function MyButton() { @@ -77,7 +77,7 @@ When `throwOnCancel` is set to `true`, the fetcher will throw a `ClerkRuntimeErr In this example, `myFetcher` would be a function in your backend that fetches data from the route that requires reverification. See the [guide on how to require reverification](/docs/guides/reverification) for more information. -```tsx {{ filename: 'MyButton.tsx' }} +```tsx {{ filename: 'src/components/MyButton.tsx' }} import { useReverification } from '@clerk/clerk-react' import { isClerkRuntimeError } from '@clerk/clerk-react/errors' diff --git a/docs/references/react/use-sign-in.mdx b/docs/references/react/use-sign-in.mdx index b598cfb506..13c7b55668 100644 --- a/docs/references/react/use-sign-in.mdx +++ b/docs/references/react/use-sign-in.mdx @@ -57,7 +57,7 @@ The `useSignIn()` hook provides access to the [`SignIn`](/docs/references/javasc The following example uses the `useSignIn()` hook to access the [`SignIn`](/docs/references/javascript/sign-in/sign-in) object, which contains the current sign-in attempt status and methods to create a new sign-in attempt. The `isLoaded` property is used to handle the loading state. -```tsx {{ filename: 'src/components/SignInPage.tsx' }} +```tsx {{ filename: 'src/pages/SignInPage.tsx' }} import { useSignIn } from '@clerk/clerk-react' export default function SignInPage() { @@ -68,7 +68,7 @@ export default function SignInPage() { return null } - return
The current sign in attempt status is {signIn?.status}.
+ return
The current sign-in attempt status is {signIn?.status}.
} ``` @@ -113,4 +113,4 @@ The `status` property of the `SignIn` object can be one of the following values: ### Create a custom sign-in flow with `useSignIn()` -The `useSignIn()` hook can also be used to build fully custom sign-in flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-in flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the `useSignIn()` hook to create custom flows, see the [custom flow guides](/docs/custom-flows/overview). \ No newline at end of file +The `useSignIn()` hook can also be used to build fully custom sign-in flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-in flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the `useSignIn()` hook to create custom flows, see the [custom flow guides](/docs/custom-flows/overview). diff --git a/docs/references/react/use-sign-up.mdx b/docs/references/react/use-sign-up.mdx index 3090a0f6ae..211c3f985b 100644 --- a/docs/references/react/use-sign-up.mdx +++ b/docs/references/react/use-sign-up.mdx @@ -57,10 +57,10 @@ The `useSignUp()` hook provides access to the [`SignUp`](/docs/references/javasc The following example uses the `useSignUp()` hook to access the [`SignUp`](/docs/references/javascript/sign-up/sign-up) object and check the current status of a sign-up. -```tsx {{ filename: 'src/components/SignUpPage.tsx' }} +```tsx {{ filename: 'src/pages/SignUpPage.tsx' }} import { useSignUp } from '@clerk/clerk-react' -export default function SignUpStep() { +export default function SignUpPage() { const { isLoaded, signUp } = useSignUp() if (!isLoaded) { @@ -99,4 +99,4 @@ The `status` property of the `SignUp` object can be one of the following values: ### Create a custom sign-up flow with `useSignUp()` -The `useSignUp()` hook can also be used to build fully custom sign-up flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-up flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the `useSignUp()` hook to create custom flows, see the [custom flow guides](/docs/custom-flows/overview). \ No newline at end of file +The `useSignUp()` hook can also be used to build fully custom sign-up flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-up flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the `useSignUp()` hook to create custom flows, see the [custom flow guides](/docs/custom-flows/overview).