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

The Motion library for the web

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var useGestureState = require('./use-gesture-state.cjs.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.useGestureState(target, options, inViewport, inheritedInViewport, poses);
    isPoseActive.inViewport = isInViewport;
    let shouldObserve = !!inViewport || !!onViewportEnter || !!onViewportLeave;
    if (once && isInViewport)
        shouldObserve = false;
    React.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,
    ]);
}

exports.useViewport = useViewport;