@darwish/hooks-core/esm/useSize.js

import { useEffect } from "react";
import useEventListener from "./useEventListener";
import useRafState from "./useRafState";
/**
 * 监听一个容器的宽度和高度的变化。
 *
 * 注意：入参如果传入，就监听当前的DOM宽高的变化，否则则是窗口`window`的宽高变化
 * @param target DOM
 * @returns
 */
export default function useSize(target) {
    var isTarget = target !== undefined;
    var _a = useRafState({
        width: isTarget ? 0 : window.innerWidth,
        height: isTarget ? 0 : window.innerHeight,
    }), dimensions = _a[0], setDimensions = _a[1];
    useEventListener(window, "resize", function () {
        if (!isTarget) {
            setDimensions({
                width: window.innerWidth,
                height: window.innerHeight,
            });
        }
    });
    useEffect(function () {
        if (isTarget) {
            var resizeObserver_1 = new ResizeObserver(function (entries) {
                for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
                    var entrie = entries_1[_i];
                    var _a = entrie.contentRect, height = _a.height, width = _a.width;
                    setDimensions({ height: height, width: width });
                }
            });
            if (target.current) {
                resizeObserver_1.observe(target.current);
            }
            return function () {
                resizeObserver_1.disconnect();
            };
        }
    }, []);
    return dimensions;
}