motion/dist/targets/react/hooks/use-viewport.es.js

The Motion library for the web

import { useEffect } from 'react';
import { useGestureState } from './use-gesture-state.es.js';

function useViewport(ref, target, options, { inViewport, poses, viewport = {}, onViewportEnter, onViewportLeave, }, { inViewport: inheritedInViewport }, isPoseActive) {
    const { root, margin: rootMargin, once, threshold } = viewport;
    const [isInViewport, setViewportState] = useGestureState(target, options, inViewport, inheritedInViewport, poses);
    isPoseActive.inViewport = isInViewport;
    let shouldObserve = !!inViewport || !!onViewportEnter || !!onViewportLeave;
    if (once && isInViewport)
        shouldObserve = false;
    useEffect(() => {
        if (!shouldObserve || typeof IntersectionObserver === "undefined")
            return;
        const observer = new IntersectionObserver(([entry]) => {
            setViewportState(entry.isIntersecting);
            const callback = entry.isIntersecting
                ? onViewportEnter
                : onViewportLeave;
            callback && callback(entry);
        }, { root: root === null || root === void 0 ? void 0 : root.current, rootMargin, threshold });
        observer.observe(ref.current);
        return () => observer.disconnect();
    }, [
        inViewport,
        onViewportEnter,
        onViewportLeave,
        root,
        rootMargin,
        threshold,
    ]);
}

export { useViewport };