Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 1x 1x 94x 94x 94x 76x 76x 38x 1x 1x 1x 1x 1x 1x 1x 1x 38x 38x 38x 94x 94x 94x 1x | import { useEffect, useRef, useState } from 'react';
const useResizeObserver = <T extends HTMLElement = HTMLDivElement>() => {
const ref = useRef<T | null>(null);
const [size, setSize] = useState({ width: 0, height: 0 });
useEffect(() => {
const element = ref.current;
if (!element) return;
const observer = new ResizeObserver(([entry]) => {
if (entry) {
const { width, height } = entry.contentRect;
setSize((prevSize) => {
if (prevSize.width !== width || prevSize.height !== height) {
return { width, height };
}
return prevSize;
});
}
});
observer.observe(element);
return () => observer.disconnect();
}, []);
return { ref, size };
};
export default useResizeObserver;
|