UseMutationObserverDemo

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  CardHeader,
11  CardTitle,
12} from '@/components/ui/card';
13 
14import { useMutationObserver } from '@/hooks/guarahooks/use-mutation-observer';
15 
16export function UseMutationObserverDemo() {
17  const targetRef = useRef<HTMLDivElement | null>(null);
18  const [mutations, setMutations] = useState<MutationRecord[]>([]);
19  const [count, setCount] = useState(0);
20 
21  useMutationObserver<HTMLDivElement>({
22    target: targetRef,
23    callback: (mutationsList) => {
24      setMutations((prev) => [...prev, ...mutationsList]);
25      setCount((prev) => prev + mutationsList.length);
26    },
27  });
28 
29  const addElement = () => {
30    if (targetRef.current) {
31      const newElement = document.createElement('div');
32      newElement.className = 'p-2 m-2 border rounded';
33      newElement.textContent = `New Element ${count + 1}`;
34      targetRef.current.appendChild(newElement);
35    }
36  };
37 
38  const clearMutations = () => {
39    setMutations([]);
40    setCount(0);
41  };
42 
43  return (
44    <Card>
45      <CardHeader>
46        <CardTitle>Mutation Observer Demo</CardTitle>
47        <CardDescription>
48          Watch how the hook detects DOM changes in real-time
49        </CardDescription>
50      </CardHeader>
51      <CardContent className="space-y-4">
52        <div className="flex gap-2">
53          <Button onClick={addElement}>Add Element</Button>
54          <Button variant="outline" onClick={clearMutations}>
55            Clear Mutations
56          </Button>
57        </div>
58 
59        <div ref={targetRef} className="min-h-[100px] p-4 border rounded-lg">
60          <p className="text-sm text-gray-500">Target Element</p>
61        </div>
62 
63        <div className="space-y-2">
64          <h3 className="font-medium">Mutation Count: {count}</h3>
65          <div className="max-h-[200px] overflow-auto">
66            {mutations.map((mutation, index) => (
67              <div key={index} className="p-2 text-sm rounded">
68                <p>Type: {mutation.type}</p>
69                <p>Target: {mutation.target.nodeName}</p>
70              </div>
71            ))}
72          </div>
73        </div>
74      </CardContent>
75    </Card>
76  );
77}