remix-utils
Version:
This package contains simple utility functions to use with [React Router](https://reactrouter.com/).
22 lines • 851 B
JavaScript
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
import * as React from "react";
import { useHydrated } from "./use-hydrated.js";
/**
* 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 }) {
return useHydrated() ? _jsx(_Fragment, { children: children() }) : _jsx(_Fragment, { children: fallback });
}
//# sourceMappingURL=client-only.js.map