UseIntersectionObserverDemo

1'use client';
2 
3import React, { useRef } 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 { useIntersectionObserver } from '@/hooks/guarahooks/use-intersection-observer';
16 
17export function UseIntersectionObserverDemo() {
18  const targetRef = useRef<HTMLDivElement | null>(null);
19  const { ref, entry, isIntersecting } =
20    useIntersectionObserver<HTMLDivElement>({
21      root: null,
22      rootMargin: '0px',
23      threshold: 0.1,
24    });
25 
26  return (
27    <Card className="max-w-md w-full">
28      <CardHeader>
29        <CardTitle>Intersection Observer Demo</CardTitle>
30        <CardDescription>
31          Observe when the box enters/exits the viewport.
32        </CardDescription>
33      </CardHeader>
34      <CardContent className="space-y-4">
35        <div
36          ref={(node) => {
37            targetRef.current = node;
38            ref(node);
39          }}
40          className="h-48 border-2 rounded-lg flex items-center justify-center"
41        >
42          {isIntersecting ? 'Visible' : 'Not Visible'}
43        </div>
44        <div>
45          <p>Intersection Ratio: {entry?.intersectionRatio.toFixed(2)}</p>
46        </div>
47      </CardContent>
48      <CardFooter>
49        <Button variant="outline" onClick={() => ref(null)}>
50          Reset Observer
51        </Button>
52      </CardFooter>
53    </Card>
54  );
55}