Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | // @flow
import { useEffect, useRef, useState } from "react"
const DEFAULT_IS_VISIBLE = false
const DEFAULT_OFFSET = "0px"
const useOnScreen = (
offset?: string = DEFAULT_OFFSET
): [boolean, {| current: ?HTMLElement |}] => {
const ref = useRef<?HTMLElement>(null)
const [isOnScreen, setOnScreen] = useState<boolean>(DEFAULT_IS_VISIBLE)
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
setOnScreen(entry.isIntersecting)
}
},
{
offset
}
)
if (ref.current) {
observer.observe(ref.current)
}
return () => {
if (ref.current) {
observer.unobserve(ref.current)
}
}
}, [])
return [isOnScreen, ref]
}
export default useOnScreen
|