25 lines
764 B
TypeScript
25 lines
764 B
TypeScript
|
import { useEffect, useState } from 'react'
|
||
|
|
import { useEvent } from '../hooks/use-event'
|
||
|
|
|
||
|
|
export function VisibilityObserver(props: {
|
||
|
|
className?: string
|
||
|
|
onVisibilityUpdated: (visible: boolean) => void
|
||
|
|
}) {
|
||
|
|
const { className } = props
|
||
|
|
const [elem, setElem] = useState<HTMLElement | null>(null)
|
||
|
|
const onVisibilityUpdated = useEvent(props.onVisibilityUpdated)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const hasIOSupport = !!window.IntersectionObserver
|
||
|
|
if (!hasIOSupport || !elem) return
|
||
|
|
|
||
|
|
const observer = new IntersectionObserver(([entry]) => {
|
||
|
|
onVisibilityUpdated(entry.isIntersecting)
|
||
|
|
}, {})
|
||
|
|
observer.observe(elem)
|
||
|
|
return () => observer.disconnect()
|
||
|
|
}, [elem, onVisibilityUpdated])
|
||
|
|
|
||
|
|
return <div ref={setElem} className={className}></div>
|
||
|
|
}
|