ClientOnly

A component that only renders its children on the client-side, preventing hydration mismatches between server and client rendering.

Import

Code
import { ClientOnly } from "zudoku/components";

Props

Code
type ClientOnlyProps = {
  children: ReactNode;
  fallback?: ReactNode;
};

Usage

Basic Usage

Code
<ClientOnly>
  <SomeClientOnlyComponent />
</ClientOnly>

With Fallback

Code
<ClientOnly fallback={<div>Loading...</div>}>
  <InteractiveWidget />
</ClientOnly>

Examples

Code
function MyComponent() {
  return (
    <div>
      <h1>This renders on both server and client</h1>
      <ClientOnly fallback={<Spinner />}>
        <ComponentThatUsesWindowObject />
      </ClientOnly>
    </div>
  );
}

Use Cases

• Browser APIs: Components that use window, document, or other browser-only APIs
• Third-party Libraries: Libraries that don't support SSR
• Theme Switches: Preventing flash of incorrect theme
• Interactive Widgets: Components with complex client-side state
• Conditional Features: Features that should only appear on the client

Notes