React useIntersectionObserver hook
Observes visibility changes for a given element.
- Use the
useState()
hook to store the intersection value of the given element. - Create an
IntersectionObserver
with the givenoptions
and an appropriate callback to update theisIntersecting
state variable. - Use the
useEffect()
hook to callIntersectionObserver.observe()
when mounting the component and clean up usingIntersectionObserver.unobserve()
when unmounting.
const useIntersectionObserver = (ref, options) => { const [isIntersecting, setIsIntersecting] = React.useState(false); React.useEffect(() => { const observer = new IntersectionObserver(([entry]) => { setIsIntersecting(entry.isIntersecting); }, options); if (ref.current) { observer.observe(ref.current); } return () => { observer.unobserve(ref.current); }; }, []); return isIntersecting; }; const MyApp = () => { const ref = React.useRef(); const onScreen = useIntersectionObserver(ref, { threshold: 0.5 }); return ( <div> <div style={{ height: '100vh' }}>Scroll down</div> <div style={{ height: '100vh' }} ref={ref}> <p>{onScreen ? 'Element is on screen.' : 'Scroll more!'}</p> </div> </div> ); }; ReactDOM.createRoot(document.getElementById('root')).render( <MyApp /> );