useWindowIntersection

example.tsx

function Example() {
  const elementRef = useRef<HTMLDivElement>(null) // ref for the element you want to watch
  const isInsideWindow = useWindowIntersection(elementRef)
    
  return <div ref={elementRef}>
    is inside window: {isInWindow}
  </div>
}

useWindowIntersection.ts

import { useState, useEffect } from "react"

export default function useWindowIntersection<E extends Element>(
  targetRef: React.RefObject<E>,
) {
  const [isInWindow, setIsInWindow] = useState(false)

  useEffect(() => {
    if (!targetRef.current) return

    const observer = new IntersectionObserver((entries) => {
      setIsInWindow(entries.some((entry) => entry.isIntersecting))
    })
    observer.observe(targetRef.current)

    return () => observer.disconnect()
  }, [targetRef])

  return isInWindow
}