Rev 1323 | Rev 2774 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import { useState, useEffect, useRef } from 'react'
export default function useNearScreen({
externalRef,
once = true,
rootMargin = '100px'
}) {
const [isNearScreen, setShow] = useState(false)
const fromRef = useRef(null)
useEffect(() => {
const element = externalRef ? externalRef.current : fromRef.current
const onChange = (entries, observer) => {
const el = entries[0]
if (el.isIntersecting) {
setShow(true)
once && observer.disconnect()
} else {
!once && setShow(false)
}
}
const observer = new IntersectionObserver(onChange, {
rootMargin
})
if (element) observer.observe(element)
return () => observer && observer.disconnect()
}, [externalRef, fromRef])
return [isNearScreen, fromRef]
}