@yamada-ui/use-resize-observer/dist/index.mjs

Yamada UI useResizeObserver custom hook

"use client"

// src/index.ts
import { createdDom } from "@yamada-ui/utils";
import { useEffect, useMemo, useRef, useState } from "react";
var defaultRect = {
  bottom: 0,
  height: 0,
  left: 0,
  right: 0,
  top: 0,
  width: 0,
  x: 0,
  y: 0
};
var useResizeObserver = () => {
  const id = useRef(0);
  const ref = useRef(null);
  const [rect, setRect] = useState(defaultRect);
  const observer = useMemo(() => {
    if (!createdDom()) return null;
    return new ResizeObserver(([entry]) => {
      if (!entry) return;
      cancelAnimationFrame(id.current);
      id.current = requestAnimationFrame(() => {
        if (ref.current) setRect(entry.contentRect);
      });
    });
  }, []);
  useEffect(() => {
    if (ref.current) observer == null ? void 0 : observer.observe(ref.current);
    return () => {
      observer == null ? void 0 : observer.disconnect();
      if (id.current) cancelAnimationFrame(id.current);
    };
  }, [observer]);
  return [ref, rect];
};
var useElementSize = () => {
  const [ref, { height, width }] = useResizeObserver();
  return { ref, height, width };
};
export {
  useElementSize,
  useResizeObserver
};
//# sourceMappingURL=index.mjs.map