33 lines
831 B
TypeScript
33 lines
831 B
TypeScript
import { useEffect } from '../lib/teact/teact';
|
|
import { throttle } from '../util/schedulers';
|
|
|
|
const THROTTLE = 300;
|
|
|
|
export default function useResizeObserver(
|
|
ref: React.RefObject<HTMLElement> | undefined,
|
|
onResize: (entry: ResizeObserverEntry) => void,
|
|
withThrottle = false,
|
|
) {
|
|
useEffect(() => {
|
|
if (!('ResizeObserver' in window) || !ref?.current) {
|
|
return undefined;
|
|
}
|
|
|
|
const callback: ResizeObserverCallback = ([entry]) => {
|
|
// During animation
|
|
if (!(entry.target as HTMLElement).offsetParent) {
|
|
return;
|
|
}
|
|
|
|
onResize(entry);
|
|
};
|
|
const observer = new ResizeObserver(withThrottle ? throttle(callback, THROTTLE, false) : callback);
|
|
|
|
observer.observe(ref.current);
|
|
|
|
return () => {
|
|
observer.disconnect();
|
|
};
|
|
}, [onResize, ref, withThrottle]);
|
|
}
|