BrowserOnly

A wrapper component that ensures its children only render in the browser, after hydration has completed. Useful for components that rely on browser-only APIs like window, document, localStorage, or media queries.

1import { BrowserOnly } from "@ngrok/mantle/browser-only";2 3<BrowserOnly fallback={<div className="h-8 w-32 bg-gray-200 animate-pulse rounded" />}>4	{() => <p>This only renders in the browser after hydration!</p>}5</BrowserOnly>6 7<BrowserOnly fallback={<div className="h-20 bg-gray-100 rounded p-4">Loading...</div>}>8	{() => (9		<div className="p-4 border rounded">10			<p>Browser-only content with window dimensions:</p>11			<p>Width: {window.innerWidth}px</p>12			<p>Height: {window.innerHeight}px</p>13		</div>14	)}15</BrowserOnly>

API Reference

BrowserOnly

Prop	Type	Default	Description
`children`	`() => ReactNode`		Children must be a render function so that evaluation is deferred until after hydration has occurred.
`fallback?`	`ReactNode`	`null`	Optional fallback to render on the server (and during hydration) before the client-only children are mounted. Ideally, this should be the same dimensions as the eventual children to avoid layout shift.