Skip to main content

useOnScreen() ↔ Custom Hook to return boolean to check if node (as ref) is visible on Viewport; Abstracts Intersection Observer API Web API

export default function useOnScreen(ref: RefObject<HTMLElement\>) {
  const [isIntersecting, setIntersecting] = useState(false)

  const observer = useMemo(
    () =>
      new IntersectionObserver(([entry]) =>
        setIntersecting(entry.isIntersecting)
      ),
    [ref]
  )

  useEffect(() => {
    if (ref.current) observer.observe(ref.current)
    return () => observer.disconnect()
  }, [])

  return isIntersecting
}
const DummyComponent = () => {
  
  const ref = useRef<HTMLDivElement\>(null)
  const isVisible = useOnScreen(ref)
  
  return <div ref={ref}\>{isVisible && `Yep, I'm on screen`}</div\>
}

References​