@mantine/hooks/esm/use-mutation-observer/use-mutation-observer.mjs

A collection of 50+ hooks for state and UI management

"use client";
import { useCallback, useEffect, useRef } from "react";
//#region packages/@mantine/hooks/src/use-mutation-observer/use-mutation-observer.ts
function useMutationObserver(callback, options) {
	const observer = useRef(null);
	return useCallback((node) => {
		if (observer.current) {
			observer.current.disconnect();
			observer.current = null;
		}
		if (node) {
			observer.current = new MutationObserver(callback);
			observer.current.observe(node, options);
		}
		return () => {
			if (observer.current) {
				observer.current.disconnect();
				observer.current = null;
			}
		};
	}, [callback, options]);
}
function useMutationObserverTarget(callback, options, target) {
	const observer = useRef(null);
	useEffect(() => {
		if (observer.current) {
			observer.current.disconnect();
			observer.current = null;
		}
		const targetElement = typeof target === "function" ? target() : target;
		if (targetElement) {
			observer.current = new MutationObserver(callback);
			observer.current.observe(targetElement, options);
		}
		return () => {
			if (observer.current) {
				observer.current.disconnect();
				observer.current = null;
			}
		};
	}, [
		callback,
		options,
		target
	]);
}
//#endregion
export { useMutationObserver, useMutationObserverTarget };

//# sourceMappingURL=use-mutation-observer.mjs.map