UseIsomorphicLayoutEffectDemo

1'use client';
2 
3import React, { useRef, useState } from 'react';
4 
5import { Button } from '@/components/ui/button';
6import {
7  Card,
8  CardContent,
9  CardDescription,
10  CardFooter,
11  CardHeader,
12  CardTitle,
13} from '@/components/ui/card';
14 
15import { useIsomorphicLayoutEffect } from '@/hooks/guarahooks/use-isomorphic-layout-effect';
16 
17export default function UseIsomorphicLayoutEffectDemo() {
18  const boxRef = useRef<HTMLDivElement | null>(null);
19  const [boxWidth, setBoxWidth] = useState(0);
20 
21  useIsomorphicLayoutEffect(() => {
22    if (boxRef.current) {
23      setBoxWidth(Math.round(boxRef.current.getBoundingClientRect().width));
24    }
25  }, []);
26 
27  return (
28    <Card className="relative max-w-sm w-full">
29      <CardHeader>
30        <CardTitle>useIsomorphicLayoutEffect</CardTitle>
31        <CardDescription>
32          This component measures its own width using an isomorphic layout
33          effect (no SSR warning).
34        </CardDescription>
35      </CardHeader>
36      <CardContent>
37        <div ref={boxRef} className="border border-border rounded-md p-4">
38          <p>Resize or hydrate to measure this box.</p>
39        </div>
40        <p className="mt-2">Box width: {boxWidth}px</p>
41      </CardContent>
42      <CardFooter>
43        <Button onClick={() => setBoxWidth(0)}>Reset</Button>
44      </CardFooter>
45    </Card>
46  );
47}