34 lines
824 B
TypeScript
34 lines
824 B
TypeScript
'use client';
|
|
|
|
import { useEffect, useRef } from 'react';
|
|
|
|
export function useResizeObserver(callback: (entry: ResizeObserverEntry) => void) {
|
|
const ref = useRef<HTMLElement>(null);
|
|
const frameId = useRef<number>(0);
|
|
|
|
useEffect(() => {
|
|
const element = ref.current;
|
|
if (!element) return;
|
|
|
|
const observer = new ResizeObserver((entries) => {
|
|
// Cancel previous frame to avoid stacking updates
|
|
if (frameId.current) cancelAnimationFrame(frameId.current);
|
|
|
|
frameId.current = requestAnimationFrame(() => {
|
|
for (const entry of entries) {
|
|
callback(entry);
|
|
}
|
|
});
|
|
});
|
|
|
|
observer.observe(element);
|
|
|
|
return () => {
|
|
observer.disconnect();
|
|
if (frameId.current) cancelAnimationFrame(frameId.current);
|
|
};
|
|
}, [callback]);
|
|
|
|
return ref;
|
|
}
|