foxact/use-intersection/index.cjs

React Hooks/Utils done right. For browser, SSR, and React Server Components.

"use strict";require("client-only");var e=require("react"),t=require("../request-idle-callback/index.cjs");const n="function"==typeof IntersectionObserver,r=new Map,o=[];exports.useIntersection=function(c){let{rootRef:i,rootMargin:s,disabled:u}=c;const[l,a]=e.useState(!1),f=e.useRef(null);e.useEffect(()=>{if(n){if(u||l)return;const e=f.current;if(null==e?void 0:e.tagName)return function(e,t,n){const{id:c,observer:i,elements:s}=function(e){let t;const n={root:e.root||null,margin:e.rootMargin||""},c=o.find(e=>e.root===n.root&&e.margin===n.margin);if(c&&(t=r.get(c)))return t;const i=new Map;return t={id:n,observer:new IntersectionObserver(e=>{e.forEach(e=>{const t=i.get(e.target),n=e.isIntersecting||e.intersectionRatio>0;t&&n&&t(n)})},e),elements:i},o.push(n),r.set(n,t),t}(n);return s.set(e,t),i.observe(e),function(){if(s.delete(e),i.unobserve(e),0===s.size){i.disconnect(),r.delete(c);const e=o.findIndex(e=>e.root===c.root&&e.margin===c.margin);e>-1&&o.splice(e,1)}}}(e,e=>e&&a(!0),{root:null==i?void 0:i.current,rootMargin:s})}if(!l){const e=t.requestIdleCallback(()=>a(!0));return()=>t.cancelIdleCallback(e)}},[u,s,i,l]);const d=e.useCallback(()=>{a(!1)},[]);return[e.useCallback(e=>{f.current=e},[]),l,d]};