preact-intersection-observer/dist/index.js

A lightweight Preact implementation of Intersection Observer API

import{h}from"preact";import{useEffect,useRef,useState}from"preact/hooks";export const useObserver=e=>{const[r,t]=useState((null==e?void 0:e.defaultInView)||!1),n=useRef(),s=useRef(),u=useRef();return window&&!n.current&&(n.current=new IntersectionObserver((e=>{s.current=e[0],t(e[0].isIntersecting)}),Object.assign(Object.assign({},e),{root:u.current}))),useEffect((()=>{s.current?(null==e?void 0:e.triggerOnce)&&u.current&&n.current.unobserve(u.current):n.current.observe(u.current)}),[u,r,e]),[u,r,s.current]};export const ViewportObserver=({render:e,options:r,as:t="div"})=>{const[n,s,u]=useObserver(r);return h(t,{ref:n},e({inView:s,entry:u}))};