zent/es/utils/hooks/useResizeObserver.js

一套前端设计语言和基于React的实现

import { useCallback, useEffect, useRef } from 'react';
import { runOnceInNextFrame } from '../nextFrame';
var ResizeObserver = window.ResizeObserver;
export var useResizeObserver = function (callback) {
    var observerRef = useRef(null);
    var getObserverInstance = useCallback(function () { return ResizeObserver && new ResizeObserver(runOnceInNextFrame(callback)); }, [callback]);
    useEffect(function () {
        observerRef.current = getObserverInstance();
    }, [getObserverInstance]);
    var observe = useCallback(function (target, options) {
        var _a;
        if (target) {
            (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.observe(target, options);
        }
    }, [observerRef]);
    var unobserve = useCallback(function (target) {
        var _a;
        (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.unobserve(target);
    }, [observerRef]);
    var disconnect = useCallback(function () {
        var _a;
        (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
    }, [observerRef]);
    return {
        observer: observerRef,
        observe: observe,
        unobserve: unobserve,
        disconnect: disconnect,
    };
};