28 lines
599 B
TypeScript
28 lines
599 B
TypeScript
import { useEffect, useState } from 'react';
|
|
|
|
const useResizeObserver = (ref: React.RefObject<HTMLElement>) => {
|
|
const [size, setSize] = useState({ width: 0, height: 0 });
|
|
|
|
useEffect(() => {
|
|
const element = ref.current;
|
|
if (!element) return;
|
|
|
|
const observer = new ResizeObserver((entries) => {
|
|
if (entries[0]) {
|
|
const { width, height } = entries[0].contentRect;
|
|
setSize({ width, height });
|
|
}
|
|
});
|
|
|
|
observer.observe(element);
|
|
|
|
return () => {
|
|
observer.disconnect();
|
|
};
|
|
}, [ref]);
|
|
|
|
return size;
|
|
};
|
|
|
|
export default useResizeObserver;
|