Client Only

A utility component that defers rendering its children to the client, preventing SSR mismatches.

Usage

Wraps content that should only be rendered on the client after hydration. During server-side rendering the optional fallback is shown instead, preventing hydration mismatches caused by browser-only APIs or non-deterministic values.

import { ClientOnly } from "@elemnts-ui/react"

<ClientOnly>
  <p>I only render on the client.</p>
</ClientOnly>

Examples

Fallback

Provide a fallback prop to show placeholder content during SSR and before hydration completes.

Render Function

Pass a function as children to defer evaluation entirely until the component mounts on the client. This is useful when the children reference browser-only globals such as window or document.

API Reference

Prop	Type	Default
children	`ReactNode \| (() => ReactNode)`	-
fallback	`ReactNode`	`undefined`