BrowserOnly

A wrapper component that ensures its children only render in the browser, after hydration has completed.

import { BrowserOnly } from "@ngrok/mantle/browser-only";

<BrowserOnly fallback={<div className="h-8 w-32 bg-gray-200 animate-pulse rounded" />}>
	{() => <p>This only renders in the browser after hydration!</p>}
</BrowserOnly>

<BrowserOnly fallback={<div className="h-20 bg-gray-100 rounded p-4">Loading...</div>}>
	{() => (
		<div className="p-4 border rounded">
			<p>Browser-only content with window dimensions:</p>
			<p>Width: {window.innerWidth}px</p>
			<p>Height: {window.innerHeight}px</p>
		</div>
	)}
</BrowserOnly>

API Reference

The BrowserOnly component ensures its children only render in the browser, after hydration has completed. This is useful for components that rely on browser-only APIs.

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.

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.