UseIntersectionObserver

1'use client';
2 
3import { useCallback, useEffect, useRef, useState } from 'react';
4 
5interface UseIntersectionObserverOptions extends IntersectionObserverInit {}
6 
7interface UseIntersectionObserverReturn<T extends Element = Element> {
8  ref: (node: T | null) => void;
9  entry: IntersectionObserverEntry | null;
10  isIntersecting: boolean;
11}
12 
13export function useIntersectionObserver<T extends Element = Element>(
14  options: UseIntersectionObserverOptions = {},
15): UseIntersectionObserverReturn<T> {
16  const [entry, setEntry] = useState<IntersectionObserverEntry | null>(null);
17  const observerRef = useRef<IntersectionObserver | null>(null);
18 
19  const ref = useCallback(
20    (node: T | null) => {
21      if (observerRef.current) {
22        observerRef.current.disconnect();
23        observerRef.current = null;
24      }
25 
26      if (node) {
27        observerRef.current = new IntersectionObserver(([entry]) => {
28          setEntry(entry);
29        }, options);
30 
31        observerRef.current.observe(node);
32      } else {
33        setEntry(null);
34      }
35    },
36    [options],
37  );
38 
39  useEffect(() => {
40    return () => {
41      observerRef.current?.disconnect();
42    };
43  }, []);
44 
45  const isIntersecting = entry?.isIntersecting ?? false;
46 
47  return { ref, entry, isIntersecting };
48}