import { useMemo, useRef } from "react";
/**
 * A hook that helps you watch when HTML or SVG elements appear on the screen.
 * It lets you run code automatically when an element becomes visible to the user.
 */
export default function useIntersection() {
    const { current: targetMap } = useRef([]);
    const { current: observer } = useRef(("IntersectionObserver" in window) ? new IntersectionObserver((els) => {
        els.forEach((e, i) => {
            const result = targetMap.find((el) => el[0] === e.target);
            if (result && e.isIntersecting) {
                result[1]();
            }
        });
    }) : null);
    return useMemo(() => {
        return {
            observe: (e, cb) => {
                targetMap.push([e, cb]);
                if (observer)
                    observer.observe(e);
            },
            unobserve: (e) => {
                if (observer)
                    observer.unobserve(e);
                targetMap.splice(targetMap.findIndex((el) => el[0] === e), 1);
            },
        };
    }, []);
}
//# sourceMappingURL=useIntersection.js.map