use-in-view.tsx
1 import { RefObject, useEffect, useState } from "react" 2 3 export const useIntersection = ( 4 element: RefObject<HTMLDivElement | null>, 5 rootMargin: string 6 ) => { 7 const [isVisible, setState] = useState(false) 8 9 useEffect(() => { 10 if (!element.current) { 11 return 12 } 13 14 const el = element.current 15 16 const observer = new IntersectionObserver( 17 ([entry]) => { 18 setState(entry.isIntersecting) 19 }, 20 { rootMargin } 21 ) 22 23 observer.observe(el) 24 25 return () => observer.unobserve(el) 26 }, [element, rootMargin]) 27 28 return isVisible 29 }