flight-club-lol/hooks/use-intersection.ts

28 lines
571 B
TypeScript

"use client"
import { useEffect, useRef, useState } from "react"
export function useIntersection(threshold = 0.2) {
const ref = useRef<HTMLElement>(null)
const [isVisible, setIsVisible] = useState(false)
useEffect(() => {
const el = ref.current
if (!el) return
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
setIsVisible(true)
}
},
{ threshold }
)
observer.observe(el)
return () => observer.disconnect()
}, [threshold])
return { ref, isVisible }
}