@yamada-ui/react/dist/cjs/hooks/use-resize-observer/index.cjs

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_utils_index = require('../../utils/index.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);

//#region src/hooks/use-resize-observer/index.ts
const defaultRect = {
	bottom: 0,
	height: 0,
	left: 0,
	right: 0,
	top: 0,
	width: 0,
	x: 0,
	y: 0
};
/**
* `useResizeObserver` is a custom hook that tracks changes in the size and position of an element.
*
* @see https://yamada-ui.com/docs/hooks/use-resize-observer
*/
const useResizeObserver = () => {
	const id = (0, react.useRef)(0);
	const ref = (0, react.useRef)(null);
	const [rect, setRect] = (0, react.useState)(defaultRect);
	const observer = (0, react.useMemo)(() => {
		if (!(0, require_utils_index.utils_exports.createdDom)()) return null;
		return new ResizeObserver(([entry]) => {
			if (!entry) return;
			cancelAnimationFrame(id.current);
			id.current = requestAnimationFrame(() => {
				if (ref.current) setRect(entry.contentRect);
			});
		});
	}, []);
	(0, react.useEffect)(() => {
		if (ref.current) observer?.observe(ref.current);
		return () => {
			observer?.disconnect();
			if (id.current) cancelAnimationFrame(id.current);
		};
	}, [observer]);
	return [ref, rect];
};
const useElementSize = () => {
	const [ref, { height, width }] = useResizeObserver();
	return {
		ref,
		height,
		width
	};
};

//#endregion
exports.useElementSize = useElementSize;
exports.useResizeObserver = useResizeObserver;
//# sourceMappingURL=index.cjs.map