@modern-kit/react/dist/hooks/useResizeObserver/index.cjs

modern-kit/react

'use strict';

var utils = require('@modern-kit/utils');
var hooksUsePreservedCallback = require('../usePreservedCallback/index.cjs');
var React = require('react');

const initialState = {
  bottom: 0,
  height: 0,
  left: 0,
  right: 0,
  top: 0,
  width: 0,
  x: 0,
  y: 0
};
function useResizeObserver(action = utils.noop) {
  const [contentRect, setContentRect] = React.useState(initialState);
  const targetRef = React.useRef(null);
  const preservedCallbackAction = hooksUsePreservedCallback.usePreservedCallback(
    ([entry]) => {
      if (!entry) return;
      action(entry);
      setContentRect(entry.contentRect);
    }
  );
  React.useEffect(() => {
    if (!targetRef.current) {
      return;
    }
    const targetElement = targetRef.current;
    const observer = new ResizeObserver(preservedCallbackAction);
    observer.observe(targetElement);
    return () => {
      observer.unobserve(targetElement);
    };
  }, [preservedCallbackAction]);
  return { ref: targetRef, contentRect };
}

exports.useResizeObserver = useResizeObserver;
//# sourceMappingURL=index.cjs.map