Usage
import { ClientOnly, Skeleton } from "@chakra-ui/react"
<ClientOnly>
<ColorModeButton />
</ClientOnly>
Examples
Fallback
Use the fallback
prop to render a loading state while the client-side content
is being prepared.
<ClientOnly fallback={<Skeleton boxSize="8" />}>
<ColorModeButton />
</ClientOnly>
Render Prop (Recommended)
When your component accesses browser-only APIs (like window
, document
, or
localStorage
), use the render prop pattern to prevent server-side rendering
issues:
<ClientOnly fallback={<Skeleton />}>
{() => (
<div>
Current URL: {window.location.href}
Screen width: {window.innerWidth}px
</div>
)}
</ClientOnly>
This pattern ensures that components accessing browser APIs are only evaluated on the client side, preventing hydration mismatches and server-side errors.
It can also be used for rendering heavy components that are not needed on the server side.
Direct Children (Use with Caution)
While you can pass components directly as children, be careful with components that access browser APIs:
/* ā This may cause server-side errors */
<ClientOnly fallback={<Skeleton />}>
<ComponentThatUsesWindow />
</ClientOnly>
/* ā
This is safe */
<ClientOnly fallback={<Skeleton />}>
{() => <ComponentThatUsesWindow />}
</ClientOnly>
Props
These props can be passed to the ClientOnly
component.
Prop | Default | Type |
---|---|---|
children * | React.ReactNode | (() => React.ReactNode) The content to render on the client side. Can be a React node or a function that returns a React node. Use the function pattern when accessing browser-only APIs. | |
fallback | React.ReactNode The fallback content to render while the component is mounting on the client side. |