UseResizeObserverDemo

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 { useResizeObserver } from '@/hooks/guarahooks/use-resize-observer';
16 
17export function UseResizeObserverDemo() {
18  const targetRef = useRef<HTMLDivElement | null>(null);
19  const [size, setSize] = useState({ width: 0, height: 0 });
20  const [observing, setObserving] = useState(true);
21 
22  const { disconnect } = useResizeObserver<HTMLDivElement>({
23    target: targetRef,
24    callback: (entries) => {
25      const entry = entries[0];
26      const { width, height } = entry.contentRect;
27      setSize({ width: Math.round(width), height: Math.round(height) });
28    },
29  });
30 
31  const toggleObserving = () => {
32    if (observing) {
33      disconnect();
34    }
35    setObserving((prev) => !prev);
36  };
37 
38  return (
39    <Card className="max-w-sm w-full">
40      <CardHeader>
41        <CardTitle>Resize Observer Demo</CardTitle>
42        <CardDescription>
43          Observe size changes of the container in real time.
44        </CardDescription>
45      </CardHeader>
46      <CardContent className="space-y-4">
47        <div
48          ref={targetRef}
49          className="resize border rounded-lg p-4 max-w-full overflow-auto"
50          style={{ resize: 'both' }}
51        >
52          <p>Drag to resize this box</p>
53        </div>
54        <div>
55          <p>Width: {size.width}px</p>
56          <p>Height: {size.height}px</p>
57        </div>
58      </CardContent>
59      <CardFooter>
60        <Button variant="outline" onClick={toggleObserving}>
61          {observing ? 'Disconnect' : 'Observe'}
62        </Button>
63      </CardFooter>
64    </Card>
65  );
66}