'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import React from 'react';
import { useIntersect } from '../../hooks/useIntersect.js';
export const RenderIfInViewport = ({ children, className, forceRender })=>{
    const [hasRendered, setHasRendered] = React.useState(Boolean(forceRender));
    const [intersectionRef, entry] = useIntersect({
        rootMargin: '1000px'
    }, Boolean(forceRender));
    const isIntersecting = Boolean(entry?.isIntersecting);
    const isAboveViewport = entry?.boundingClientRect?.top < 0;
    const shouldRender = forceRender || isIntersecting || isAboveViewport;
    React.useEffect(()=>{
        if (shouldRender && !hasRendered) {
            setHasRendered(true);
        }
    }, [
        shouldRender,
        hasRendered
    ]);
    return /*#__PURE__*/ _jsxDEV("div", {
        className: className,
        ref: intersectionRef,
        children: hasRendered ? children : null
    }, void 0, false, {
        fileName: "src/elements/RenderIfInViewport/index.tsx",
        lineNumber: 33,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map