Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useDimensions: Support a custom callback #118

Open
yairEO opened this issue May 21, 2023 · 0 comments
Open

useDimensions: Support a custom callback #118

yairEO opened this issue May 21, 2023 · 0 comments
Labels
enhancement New feature or request
Milestone

Comments

@yairEO
Copy link
Contributor

yairEO commented May 21, 2023

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 yairEO added the enhancement New feature or request label May 21, 2023
@yairEO yairEO added this to the 2.0 milestone May 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant