@primer/react/dist/hooks/useResizeObserver.js

An implementation of GitHub's Primer Design System using React

import useIsomorphicLayoutEffect from "../utils/useIsomorphicLayoutEffect.js";
import { useRef, useState } from "react";
//#region src/hooks/useResizeObserver.ts
function useResizeObserver(callback, target, depsArray = [], enabled = true) {
	const [targetClientRect, setTargetClientRect] = useState(null);
	const savedCallback = useRef(callback);
	useIsomorphicLayoutEffect(() => {
		savedCallback.current = callback;
	});
	useIsomorphicLayoutEffect(() => {
		if (!enabled) return;
		const targetEl = target && "current" in target ? target.current : document.documentElement;
		if (!targetEl) return;
		if (typeof ResizeObserver === "function") {
			const observer = new ResizeObserver((entries) => {
				savedCallback.current(entries);
			});
			observer.observe(targetEl);
			return () => {
				observer.disconnect();
			};
		} else {
			const saveTargetDimensions = () => {
				const currTargetRect = targetEl.getBoundingClientRect();
				if (currTargetRect.width !== (targetClientRect === null || targetClientRect === void 0 ? void 0 : targetClientRect.width) || currTargetRect.height !== targetClientRect.height) savedCallback.current([{ contentRect: currTargetRect }]);
				setTargetClientRect(currTargetRect);
			};
			window.addEventListener("resize", saveTargetDimensions);
			return () => {
				window.removeEventListener("resize", saveTargetDimensions);
			};
		}
	}, [
		target === null || target === void 0 ? void 0 : target.current,
		enabled,
		...depsArray
	]);
}
//#endregion
export { useResizeObserver };