-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
2644f58
commit c365d34
Showing
26 changed files
with
13,667 additions
and
27,109 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import { useHydrated } from '~/hooks/use-hydrated' | ||
|
|
||
| type Props = { | ||
| /** | ||
| * You are encouraged to add a fallback that is the same dimensions | ||
| * as the client rendered children. This will avoid content layout | ||
| * shift which is disgusting | ||
| */ | ||
| children(): React.ReactNode | ||
| fallback?: React.ReactNode | ||
| } | ||
|
|
||
| /** | ||
| * Render the children only after the JS has loaded client-side. Use an optional | ||
| * fallback component if the JS is not yet loaded. | ||
| * | ||
| * Example: Render a Chart component if JS loads, renders a simple FakeChart | ||
| * component server-side or if there is no JS. The FakeChart can have only the | ||
| * UI without the behavior or be a loading spinner or skeleton. | ||
| * ```tsx | ||
| * return ( | ||
| * <ClientOnly fallback={<FakeChart />}> | ||
| * {() => <Chart />} | ||
| * </ClientOnly> | ||
| * ); | ||
| * ``` | ||
| */ | ||
| export function ClientOnly({ children, fallback = null }: Props) { | ||
| return useHydrated() ? <>{children()}</> : <>{fallback}</> | ||
| } |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import { useSyncExternalStore } from 'react' | ||
|
|
||
| function subscribe() { | ||
| return () => {} | ||
| } | ||
|
|
||
| /** | ||
| * Return a boolean indicating if the JS has been hydrated already. | ||
| * When doing Server-Side Rendering, the result will always be false. | ||
| * When doing Client-Side Rendering, the result will always be false on the | ||
| * first render and true from then on. Even if a new component renders it will | ||
| * always start with true. | ||
| * | ||
| * Example: Disable a button that needs JS to work. | ||
| * ```tsx | ||
| * let hydrated = useHydrated(); | ||
| * return ( | ||
| * <button type="button" disabled={!hydrated} onClick={doSomethingCustom}> | ||
| * Click me | ||
| * </button> | ||
| * ); | ||
| * ``` | ||
| */ | ||
| export function useHydrated() { | ||
| return useSyncExternalStore( | ||
| subscribe, | ||
| () => true, | ||
| () => false, | ||
| ) | ||
| } |
Oops, something went wrong.