27 lines
796 B
TypeScript
27 lines
796 B
TypeScript
import { useEffect, useRef, useState } from 'react'
|
|
|
|
const useIntersectionObserver = () => {
|
|
const observerRef = useRef<HTMLDivElement>(null)
|
|
const [observerIsSet, setObserverIsSet] = useState(false)
|
|
const [isIntersecting, setIsIntersecting] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const checkObserverIsIntersecting = ([entry]: IntersectionObserverEntry[]) => {
|
|
setIsIntersecting(entry.isIntersecting)
|
|
}
|
|
|
|
if (!observerIsSet) {
|
|
const intersectionObserver = new IntersectionObserver(checkObserverIsIntersecting, {
|
|
rootMargin: '0px',
|
|
threshold: 1,
|
|
})
|
|
intersectionObserver.observe(observerRef.current)
|
|
setObserverIsSet(true)
|
|
}
|
|
}, [observerIsSet])
|
|
|
|
return { observerRef, isIntersecting }
|
|
}
|
|
|
|
export default useIntersectionObserver
|