Utilities
Installation
CLI
npx shadcn@latest add @diceui/client-onlyManual
Install the following dependencies:
npm install @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