import {useLayoutEffect, useState} from 'react'
import useResizeObserver from '@react-hook/resize-observer'

export default function useRect(target) {
  const [rect, setRect] = useState();
  useLayoutEffect(() => {
    setRect(target.current.getBoundingClientRect())
  }, [target]);
  useResizeObserver(
    target,
    (entry) => {
      setRect(entry.target.getBoundingClientRect());
    },
  );
  return rect;
}