Client Only
Renders children only after the client has mounted.
Preview
Waiting for the client
import { ClientOnly } from "@/components/ui/ClientOnly";
export function ClientOnlyDemo() {
return (
<ClientOnly fallback={<span>Waiting for the client</span>}>
<span>Ready on the client</span>
</ClientOnly>
)Installation
Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces
pnpm dlx shadcn@latest add @aura/client-onlyManual
Copy and paste the ClientOnly component into your components/ui/ClientOnly.tsx file.
"use client";
import * as React from "react";
function ClientOnly({
children,
fallback = null,
}: {
children: React.ReactNode;
fallback?: React.ReactNode;
}) {
const [ready, setReady] = React.useState(false);
React.useEffect(() => setReady(true), []);
return ready ? children : fallback;
}
export { ClientOnly };