30 lines
779 B
TypeScript
30 lines
779 B
TypeScript
|
import { RefObject, useEffect, useState } from 'react'
|
||
|
|
|
||
|
|
export function useIsVisible(elementRef: RefObject<Element>) {
|
||
|
|
return !!useIntersectionObserver(elementRef)?.isIntersecting
|
||
|
|
}
|
||
|
|
|
||
|
|
function useIntersectionObserver(
|
||
|
|
elementRef: RefObject<Element>
|
||
|
|
): IntersectionObserverEntry | undefined {
|
||
|
|
const [entry, setEntry] = useState<IntersectionObserverEntry>()
|
||
|
|
|
||
|
|
const updateEntry = ([entry]: IntersectionObserverEntry[]): void => {
|
||
|
|
setEntry(entry)
|
||
|
|
}
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const node = elementRef?.current
|
||
|
|
const hasIOSupport = !!window.IntersectionObserver
|
||
|
|
|
||
|
|
if (!hasIOSupport || !node) return
|
||
|
|
|
||
|
|
const observer = new IntersectionObserver(updateEntry, {})
|
||
|
|
observer.observe(node)
|
||
|
|
|
||
|
|
return () => observer.disconnect()
|
||
|
|
}, [elementRef])
|
||
|
|
|
||
|
|
return entry
|
||
|
|
}
|