tdesign-react/lib/hooks/useResizeObserver.js

TDesign Component for React

/**
 * tdesign v1.16.6
 * (c) 2026 tdesign
 * @license MIT
 */

import { useRef } from 'react';
import { c as canUseDocument } from '../_chunks/dep-4bb7cfcf.js';
import useLatest from './useLatest.js';
import useIsomorphicLayoutEffect from './useLayoutEffect.js';
import 'lodash-es';

function useResizeObserver(container, callback) {
  var enabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
  var callbackRef = useLatest(callback);
  var observerRef = useRef(null);
  useIsomorphicLayoutEffect(function () {
    var isSupport = canUseDocument && window.ResizeObserver;
    var element = container.current;
    if (!enabled) return;
    if (isSupport && element && element instanceof Element) {
      var resizeCallback = function resizeCallback(entries) {
        callbackRef.current(entries);
      };
      observerRef.current = new ResizeObserver(resizeCallback);
      observerRef.current.observe(element);
    }
    return function () {
      if (observerRef.current && element && element instanceof Element) {
        var _observerRef$current$, _observerRef$current;
        observerRef.current.unobserve(element);
        (_observerRef$current$ = (_observerRef$current = observerRef.current).disconnect) === null || _observerRef$current$ === void 0 || _observerRef$current$.call(_observerRef$current);
        observerRef.current = null;
      }
    };
  }, [container, enabled]);
}

export { useResizeObserver as default };
//# sourceMappingURL=useResizeObserver.js.map