| 1 | import { useEffect, useState, useRef, RefObject } from "react"; |
| 2 | |
| 3 | export function useOnScreen(ref: RefObject<HTMLElement>) { |
| 4 | const observerRef = useRef<IntersectionObserver | null>(null); |
| 5 | const [isOnScreen, setIsOnScreen] = useState(false); |
| 6 | |
| 7 | useEffect(() => { |
| 8 | observerRef.current = new IntersectionObserver(([entry]) => |
| 9 | setIsOnScreen(entry.isIntersecting) |
| 10 | ); |
| 11 | }, []); |
| 12 | |
| 13 | useEffect(() => { |
| 14 | if (observerRef.current == null || ref.current == null) return; |
| 15 | observerRef.current.observe(ref.current); |
| 16 | |
| 17 | return () => { |
| 18 | if (observerRef.current == null) return; |
| 19 | observerRef.current.disconnect(); |
| 20 | }; |
| 21 | }, [ref]); |
| 22 | |
| 23 | return isOnScreen; |
| 24 | } |