Client Only

Usad to render content only on the client side

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.

Usage

import { ClientOnly } from '@fidely-ui/react'

<ClientOnly>Hey, running on client only.</ClientOnly>

Examples

Basic

<ClientOnly>
  <div>This content is only rendered on the client side.</div>
</ClientOnly>

With Fallback

<ClientOnly fallback={<Skeleton noOfLines={1} />}>
  <div>This content is only rendered on the client side.</div>
</ClientOnly>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	The content to render once the component is mounted on the client.
`fallback`	`ReactNode`	`null`	The content to render on the server or before the client has mounted.