Client Only

Render content only on the client side.

Motivation

The ClientOnly component renders its children only on the client side. This is useful for components that need to access the DOM or browser APIs that are not available on the server side.

Examples

Basic

import { ClientOnly } from '../client-only'

export const Basic = () => (
  <ClientOnly>
    <div>This content is only rendered on the client side.</div>
  </ClientOnly>
)

import { ClientOnly } from '../client-only'

export const Basic = () => (
  <ClientOnly>
    <div>This content is only rendered on the client side.</div>
  </ClientOnly>
)

Example not found

With Fallback

import { ClientOnly } from '../client-only'

export const WithFallback = () => (
  <ClientOnly fallback={<div>Loading...</div>}>
    <div>This content is only rendered on the client side.</div>
  </ClientOnly>
)

import { ClientOnly } from '../client-only'

export const WithFallback = () => (
  <ClientOnly fallback={<div>Loading...</div>}>
    <div>This content is only rendered on the client side.</div>
  </ClientOnly>
)

Example not found

API Reference

ClientOnly

Prop	Default	Type
`fallback`		`string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>`