foxact/use-intersection/index.mjs

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

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