ahooks/es/useSize/index.js

react hooks library

import ResizeObserver from 'resize-observer-polyfill';
import useRafState from '../useRafState';
import { getTargetElement } from '../utils/domTarget';
import useIsomorphicLayoutEffectWithTarget from '../utils/useIsomorphicLayoutEffectWithTarget';
function useSize(target) {
    const [state, setState] = useRafState(() => {
        const el = getTargetElement(target);
        return el ? { width: el.clientWidth, height: el.clientHeight } : undefined;
    });
    useIsomorphicLayoutEffectWithTarget(() => {
        const el = getTargetElement(target);
        if (!el) {
            return;
        }
        const resizeObserver = new ResizeObserver((entries) => {
            entries.forEach((entry) => {
                const { clientWidth, clientHeight } = entry.target;
                setState({ width: clientWidth, height: clientHeight });
            });
        });
        resizeObserver.observe(el);
        return () => {
            resizeObserver.disconnect();
        };
    }, [], target);
    return state;
}
export default useSize;