Dice UI

Installation

CLI

npx shadcn@latest add @diceui/client-only

Manual

Install the following dependencies:

npm install @diceui/hydration-boundary

Copy and paste the following code into your project.

"use client";
 
import * as React from "react";
 
interface ClientOnlyProps {
  children: React.ReactNode;
  fallback?: React.ReactNode;
}
 
function subscribe() {
  return () => {};
}
 
function getSnapshot() {
  return true;
}
 
function getServerSnapshot() {
  return false;
}
 
function ClientOnly({ children, fallback = null }: ClientOnlyProps) {
  const mounted = React.useSyncExternalStore(
    subscribe,
    getSnapshot,
    getServerSnapshot,
  );
 
  if (!mounted) return fallback;
 
  return children;
}
 
export { ClientOnly };

"use client";
 
import * as React from "react";
 
interface ClientOnlyProps {
  children: React.ReactNode;
  fallback?: React.ReactNode;
}
 
function subscribe() {
  return () => {};
}
 
function getSnapshot() {
  return true;
}
 
function getServerSnapshot() {
  return false;
}
 
function ClientOnly({ children, fallback = null }: ClientOnlyProps) {
  const mounted = React.useSyncExternalStore(
    subscribe,
    getSnapshot,
    getServerSnapshot,
  );
 
  if (!mounted) return fallback;
 
  return children;
}
 
export { ClientOnly };

"use client";
 
import * as React from "react";
 
interface ClientOnlyProps {
  children: React.ReactNode;
  fallback?: React.ReactNode;
}
 
function subscribe() {
  return () => {};
}
 
function getSnapshot() {
  return true;
}
 
function getServerSnapshot() {
  return false;
}
 
function ClientOnly({ children, fallback = null }: ClientOnlyProps) {
  const mounted = React.useSyncExternalStore(
    subscribe,
    getSnapshot,
    getServerSnapshot,
  );
 
  if (!mounted) return fallback;
 
  return children;
}
 
export { ClientOnly };

"use client";
 
import * as React from "react";
 
interface ClientOnlyProps {
  children: React.ReactNode;
  fallback?: React.ReactNode;
}
 
function subscribe() {
  return () => {};
}
 
function getSnapshot() {
  return true;
}
 
function getServerSnapshot() {
  return false;
}
 
function ClientOnly({ children, fallback = null }: ClientOnlyProps) {
  const mounted = React.useSyncExternalStore(
    subscribe,
    getSnapshot,
    getServerSnapshot,
  );
 
  if (!mounted) return fallback;
 
  return children;
}
 
export { ClientOnly };

"use client";
 
import * as React from "react";
 
interface ClientOnlyProps {
  children: React.ReactNode;
  fallback?: React.ReactNode;
}
 
function subscribe() {
  return () => {};
}
 
function getSnapshot() {
  return true;
}
 
function getServerSnapshot() {
  return false;
}
 
function ClientOnly({ children, fallback = null }: ClientOnlyProps) {
  const mounted = React.useSyncExternalStore(
    subscribe,
    getSnapshot,
    getServerSnapshot,
  );
 
  if (!mounted) return fallback;
 
  return children;
}
 
export { ClientOnly };

"use client";
 
import * as React from "react";
 
interface ClientOnlyProps {
  children: React.ReactNode;
  fallback?: React.ReactNode;
}
 
function subscribe() {
  return () => {};
}
 
function getSnapshot() {
  return true;
}
 
function getServerSnapshot() {
  return false;
}
 
function ClientOnly({ children, fallback = null }: ClientOnlyProps) {
  const mounted = React.useSyncExternalStore(
    subscribe,
    getSnapshot,
    getServerSnapshot,
  );
 
  if (!mounted) return fallback;
 
  return children;
}
 
export { ClientOnly };

Usage

import { ClientOnly } from "@/components/client-only"

export default function App() {
  return (
    <ClientOnly fallback={<LoadingSpinner />}>
      <ClientComponent />
    </ClientOnly>
  )
}

API Reference

ClientOnly

A component that only renders its children on the client side.

Prop

Type

Client Only

Installation

CLI

Manual

Usage

API Reference

ClientOnly

On this page