Utilities
Installation
CLI
npx shadcn@latest add "https://diceui.com/r/client-only"pnpm dlx shadcn@latest add "https://diceui.com/r/client-only"yarn dlx shadcn@latest add "https://diceui.com/r/client-only"bun x shadcn@latest add "https://diceui.com/r/client-only"Manual
Install the following dependencies:
npm install @diceui/hydration-boundarypnpm add @diceui/hydration-boundaryyarn add @diceui/hydration-boundarybun add @diceui/hydration-boundaryCopy and paste the following code into your project.
"use client";
import * as React from "react";
interface ClientOnlyProps {
children: React.ReactNode;
fallback?: React.ReactNode;
}
function ClientOnly({ children, fallback = null }: ClientOnlyProps) {
const [mounted, setMounted] = React.useState(false);
React.useLayoutEffect(() => {
setMounted(true);
}, []);
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 | Default |
|---|---|---|
fallback? | ReactNode | null |