This repository has no description
1'use client';
2
3import React, { useState, useEffect, ReactNode } from 'react';
4
5interface ClientOnlyProps {
6 children: ReactNode;
7 fallback?: ReactNode;
8}
9
10/**
11 * A wrapper component that only renders its children on the client side.
12 * This helps prevent hydration errors when components use browser-only APIs.
13 */
14export default function ClientOnly({ children, fallback = null }: ClientOnlyProps) {
15 const [mounted, setMounted] = useState(false);
16
17 useEffect(() => {
18 setMounted(true);
19 }, []);
20
21 if (!mounted) {
22 return <>{fallback}</>;
23 }
24
25 return <>{children}</>;
26}