UseResizeObserver

1'use client';
2 
3import { useCallback, useEffect, useRef } from 'react';
4 
5// Types
6interface UseResizeObserverProps<T extends Element = Element> {
7  target: React.RefObject<T | null>;
8  options?: ResizeObserverOptions;
9  callback: (entries: ResizeObserverEntry[], observer: ResizeObserver) => void;
10}
11 
12export function useResizeObserver<T extends Element = Element>({
13  target,
14  options,
15  callback,
16}: UseResizeObserverProps<T>) {
17  const observerRef = useRef<ResizeObserver | null>(null);
18  const prevTargetRef = useRef<T | null>(null);
19 
20  const disconnect = useCallback(() => {
21    if (observerRef.current) {
22      observerRef.current.disconnect();
23      observerRef.current = null;
24    }
25  }, []);
26 
27  useEffect(() => {
28    const node = target.current;
29    if (!node) return;
30 
31    if (prevTargetRef.current !== node) {
32      disconnect();
33      prevTargetRef.current = node;
34    }
35 
36    observerRef.current = new ResizeObserver((entries, obs) => {
37      callback(entries, obs);
38    });
39 
40    observerRef.current.observe(node, options);
41 
42    return () => {
43      disconnect();
44    };
45  }, [target, options, callback, disconnect]);
46 
47  return {
48    disconnect,
49  };
50}