@mantine/hooks/esm/use-in-viewport/use-in-viewport.mjs

A collection of 50+ hooks for state and UI management

"use client";
import { useCallback, useRef, useState } from "react";
//#region packages/@mantine/hooks/src/use-in-viewport/use-in-viewport.ts
function useInViewport() {
	const observer = useRef(null);
	const [inViewport, setInViewport] = useState(false);
	return {
		ref: useCallback((node) => {
			if (typeof IntersectionObserver !== "undefined") {
				observer.current?.disconnect();
				if (node) {
					observer.current = new IntersectionObserver((entries) => {
						const lastEntry = entries[entries.length - 1];
						setInViewport(lastEntry.isIntersecting);
					});
					observer.current.observe(node);
				} else {
					observer.current = null;
					setInViewport(false);
				}
			}
		}, []),
		inViewport
	};
}
//#endregion
export { useInViewport };

//# sourceMappingURL=use-in-viewport.mjs.map