webrix icon indicating copy to clipboard operation
webrix copied to clipboard

useDimensions: Support a custom callback

Open yairEO opened this issue 1 year ago • 0 comments

https://github.com/open-amdocs/webrix/blob/master/src/hooks/useDimensions/useDimensions.js


For devs who need to use a resizeObserver (without caring for the return value of the hook):

export default (ref, callback) => {
    const [dimensions, setDimensions] = useState({width: 0, height: 0});
    const observer = useRef(new ResizeObserver(entries => {
        callback?.(entries);
        setDimensions(readResizeObserverEntry(entries[0]));
    }));
    useEffect(() => {
        const {current: obs} = observer;
        obs.observe(ref.current);
        return () => obs.disconnect();
    }, [ref]);
    return dimensions;
};

This would allow using this same hook for other purposes also (as it already handling its own cleanup)

yairEO avatar May 21 '23 13:05 yairEO