import { useLayoutEffect, useMemo, useState } from "react";
import { useIsSSR } from "~/utils/hooks";
const defaultState = {
    x: 0,
    y: 0,
    width: 0,
    height: 0,
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
};
const useMeasure = () => {
    const isSSR = useIsSSR();
    const [element, ref] = useState(null);
    const [rect, setRect] = useState(defaultState);
    const observer = useMemo(() => !isSSR
        ? 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 });
            }
        })
        : undefined, []);
    useLayoutEffect(() => {
        if (!isSSR || !element)
            return undefined;
        observer === null || observer === void 0 ? void 0 : observer.observe(element);
        return () => {
            observer === null || observer === void 0 ? void 0 : observer.disconnect();
        };
    }, [element, isSSR]);
    return [ref, rect, element];
};
export default useMeasure;
//# sourceMappingURL=useMeasure.js.map