/ src / lib / hooks / use-in-view.tsx
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  }