useIntersectionObserver in React

import { useEffect, useRef, useState } from 'react'

function useIntersectionObserver(options?: IntersectionObserverInit) {
  const ref = useRef<HTMLElement>(null)
  const [entry, setEntry] = useState<IntersectionObserverEntry>()
  useEffect(() => {
    const el = ref.current
    if (!el) return
    const io = new IntersectionObserver(([e]) => setEntry(e), options)
    io.observe(el)
    return () => io.disconnect()
  }, [options?.root, options?.rootMargin, options?.threshold])
  return { ref, entry, isIntersecting: !!entry?.isIntersecting }
}

// Usage
function LazyImage({ src, alt }: { src: string; alt: string }) {
  const { ref, isIntersecting } = useIntersectionObserver({ rootMargin: '200px' })
  return (
    <div ref={ref as any}>
      {isIntersecting ? <img src={src} alt={alt} /> : <div className="placeholder" />}
    </div>
  )
}