import { useLayoutEffect, useMemo, useState } from "react";
const defaultState = {
    x: 0,
    y: 0,
    width: 0,
    height: 0,
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
};
const useMeasure = () => {
    const [element, ref] = useState(null);
    const [rect, setRect] = useState(defaultState);
    const observer = useMemo(() => {
        if (typeof window !== "undefined") {
            return new window.ResizeObserver((entries) => {
                if (entries[0]) {
                    const { x, y, width, height, top, left, bottom, right } = entries[0].contentRect;
                    setRect({ x, y, width, height, top, left, bottom, right });
                }
            });
        }
        return undefined;
    }, []);
    useLayoutEffect(() => {
        if (!element)
            return undefined;
        observer === null || observer === void 0 ? void 0 : observer.observe(element);
        return () => {
            observer === null || observer === void 0 ? void 0 : observer.disconnect();
        };
    }, [element]);
    return [ref, rect, element];
};
export default useMeasure;
//# sourceMappingURL=useMeasure.js.map