@tanstack/react-router
Version:
Modern and scalable routing for React applications
1 lines • 2.27 kB
Source Map (JSON)
{"version":3,"file":"ClientOnly.cjs","names":[],"sources":["../../src/ClientOnly.tsx"],"sourcesContent":["import 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}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA8BA,SAAgB,WAAW,EAAE,UAAU,WAAW,QAAyB;AACzE,QAAO,aAAa,GAClB,iBAAA,GAAA,kBAAA,KAAC,MAAA,QAAM,UAAP,EAAiB,UAA0B,CAAA,GAE3C,iBAAA,GAAA,kBAAA,KAAC,MAAA,QAAM,UAAP,EAAA,UAAiB,UAA0B,CAAA;;;;;;;;;;;;;;;;;;;;;AAuB/C,SAAgB,cAAuB;AACrC,QAAO,MAAA,QAAM,qBACX,iBACM,YACA,MACP;;AAGH,SAAS,YAAY;AACnB,cAAa"}