rc-hooks/es/useSize/index.js

React Hooks Library.

import { __read } from "tslib";
import { useState, useEffect } from 'react';
import ResizeObserver from './ResizeObserver';
import getRef from '../utils/getRef';
import useLatest from '../useLatest';
/**
 * 获取并监听 dom 节点的宽高。
 *
 * @param {Object} ref `dom` 节点引用。
 * @returns {Object} 返回 `dom` 节点的宽高。
 * @example
 * const ref = useRef<HTMLDivElement>(null);
 * const size = useSize(ref);
 *
 * return (
 *   <>
 *     <h1 ref={ref}>Hello, world</h1>
 *     <p>rect value: {JSON.stringify(size)}</p>
 *   </>
 * );
 */
function useSize(ref) {
    var latestRef = useLatest(ref);
    var _a = __read(useState(function () {
        var target = getRef(ref);
        return {
            width: target === null || target === void 0 ? void 0 : target.clientWidth,
            height: target === null || target === void 0 ? void 0 : target.clientHeight
        };
    }), 2), size = _a[0], setSize = _a[1];
    var sizeLatestRef = useLatest(size);
    useEffect(function () {
        var target = getRef(latestRef.current);
        function refresh(el) {
            var width = el === null || el === void 0 ? void 0 : el.clientWidth;
            var height = el === null || el === void 0 ? void 0 : el.clientHeight;
            if (width !== sizeLatestRef.current.width || height !== sizeLatestRef.current.height) {
                setSize({
                    width: width,
                    height: height
                });
            }
        }
        if (!target) {
            return function () { };
        }
        refresh(target);
        var observer = new ResizeObserver(function (mutationsList) {
            mutationsList.forEach(function (mutation) {
                refresh(mutation.target);
            });
        });
        observer.observe(target);
        return function () {
            observer.disconnect();
        };
    }, [latestRef, sizeLatestRef]);
    return size;
}
export default useSize;