TanTan
2a69b23b47
Dev Build / cleanup (push) Canceled after 0s
Dev Build / typecheck (push) Canceled after 0s
Dev Build / build (linux-arm64, ubuntu-24.04-arm, linux-arm64) (push) Canceled after 0s
Dev Build / build (linux-x64, ubuntu-latest, linux-x64) (push) Canceled after 0s
Dev Build / build (win-x64, windows-latest, win32-x64) (push) Canceled after 0s
Dev Build / dispatch-dev-docker (push) Canceled after 0s
1 line
2.2 KiB
Plaintext
1 line
2.2 KiB
Plaintext
{"version":3,"file":"ClientOnly.js","names":[],"sources":["../../src/ClientOnly.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nexport interface ClientOnlyProps {\n /**\n * The children to render when the JS is loaded.\n */\n children: React.ReactNode\n /**\n * The fallback component to render if the JS is not yet loaded.\n */\n fallback?: React.ReactNode\n}\n\n/**\n * Render the children only after the JS has loaded client-side. Use an optional\n * fallback component if the JS is not yet loaded.\n *\n * @example\n * Render a Chart component if JS loads, renders a simple FakeChart\n * component server-side or if there is no JS. The FakeChart can have only the\n * UI without the behavior or be a loading spinner or skeleton.\n *\n * ```tsx\n * return (\n * <ClientOnly fallback={<FakeChart />}>\n * <Chart />\n * </ClientOnly>\n * )\n * ```\n */\nexport function ClientOnly({ children, fallback = null }: ClientOnlyProps) {\n return useHydrated() ? (\n <React.Fragment>{children}</React.Fragment>\n ) : (\n <React.Fragment>{fallback}</React.Fragment>\n )\n}\n\n/**\n * Return a boolean indicating if the JS has been hydrated already.\n * When doing Server-Side Rendering, the result will always be false.\n * When doing Client-Side Rendering, the result will always be false on the\n * first render and true from then on. Even if a new component renders it will\n * always start with true.\n *\n * @example\n * ```tsx\n * // Disable a button that needs JS to work.\n * let hydrated = useHydrated()\n * return (\n * <button type=\"button\" disabled={!hydrated} onClick={doSomethingCustom}>\n * Click me\n * </button>\n * )\n * ```\n * @returns True if the JS has been hydrated already, false otherwise.\n */\nexport function useHydrated(): boolean {\n return React.useSyncExternalStore(\n subscribe,\n () => true,\n () => false,\n )\n}\n\nfunction subscribe() {\n return () => {\n // noop\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAgCA,SAAgB,WAAW,EAAE,UAAU,WAAW,QAAyB;AACzE,QAAO,aAAa,GAClB,oBAAC,MAAM,UAAP,EAAiB,UAA0B,CAAA,GAE3C,oBAAC,MAAM,UAAP,EAAA,UAAiB,UAA0B,CAAA;;;;;;;;;;;;;;;;;;;;;AAuB/C,SAAgB,cAAuB;AACrC,QAAO,MAAM,qBACX,iBACM,YACA,MACP;;AAGH,SAAS,YAAY;AACnB,cAAa"} |