Skip to main content
/mantle

Browser Only

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

Loading...
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

BrowserOnly

PropTypeDefaultDescription
children() => ReactNodeChildren must be a render function so that evaluation is deferred until after hydration has occurred.
fallback?ReactNodenullOptional 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.

canUseDOM

canUseDOM(): boolean returns true when window and document exist. Use it to guard a DOM API call that runs outside a component, such as a localStorage read in a loader.

import { canUseDOM } from "@ngrok/mantle/browser-only"; if (canUseDOM()) {	localStorage.setItem("foo", "bar");}