Skip to content

Commit

Permalink
fix code filenames to match quickstart
Browse files Browse the repository at this point in the history
  • Loading branch information
victoriaxyz committed Dec 18, 2024
1 parent 70af8fe commit 68a0e44
Show file tree
Hide file tree
Showing 5 changed files with 16 additions and 12 deletions.
8 changes: 6 additions & 2 deletions docs/references/react/use-auth.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -109,6 +109,10 @@ export default function ExternalDataPage() {
return <div>Sign in to view this page</div>
}

return <div><button onClick={fetchExternalData}>Fetch Data</button></div>
return (
<div>
<button onClick={fetchExternalData}>Fetch Data</button>
</div>
)
}
```
4 changes: 2 additions & 2 deletions docs/references/react/use-organization-list.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -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'

Expand Down
4 changes: 2 additions & 2 deletions docs/references/react/use-reverification.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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'

Expand Down
6 changes: 3 additions & 3 deletions docs/references/react/use-sign-in.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -68,7 +68,7 @@ export default function SignInPage() {
return null
}

return <div>The current sign in attempt status is {signIn?.status}.</div>
return <div>The current sign-in attempt status is {signIn?.status}.</div>
}
```

Expand Down Expand Up @@ -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).
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).
6 changes: 3 additions & 3 deletions docs/references/react/use-sign-up.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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).
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).

0 comments on commit 68a0e44

Please sign in to comment.