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

modern-kit/react

import { noop } from '@modern-kit/utils';
import { usePreservedCallback } from '../usePreservedCallback/index.mjs';
import { useState, useRef, useEffect } from 'react';

const initialState = {
  bottom: 0,
  height: 0,
  left: 0,
  right: 0,
  top: 0,
  width: 0,
  x: 0,
  y: 0
};
function useResizeObserver(action = noop) {
  const [contentRect, setContentRect] = useState(initialState);
  const targetRef = useRef(null);
  const preservedCallbackAction = usePreservedCallback(
    ([entry]) => {
      if (!entry) return;
      action(entry);
      setContentRect(entry.contentRect);
    }
  );
  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 };
}

export { useResizeObserver };
//# sourceMappingURL=index.mjs.map