@kentcdodds/tmp-remix-utils
Version:
This package contains simple utility functions to use with [Remix.run](https://remix.run).
21 lines (20 loc) • 616 B
JavaScript
import * as React from "react";
import { useHydrated } from "./use-hydrated.js";
/**
* Render the children only before the JS has loaded client-side. Use an
* optional fallback component for once the JS has loaded.
*
* Example: Render a hidden input to identify if the user has JS.
* ```tsx
* return (
* <ServerOnly fallback={<FakeChart />}>
* {() => <Chart />}
* </ServerOnly>
* );
* ```
*/
export function ServerOnly({ children, fallback = null }) {
return useHydrated()
? React.createElement(React.Fragment, null, fallback)
: React.createElement(React.Fragment, null, children());
}