import { useEffect, useState, useRef, RefObject } from "react"; /** * Gewisse Aktionen müssen erst ausgeführt werden, wenn eine Komponente im Viewport erscheint. * das wäre z.B. bei Langen Card-Lists mit Bildern der Fall. Bilder müssen im Grunde erst geladen werden, * wenn man die Komponente auch sieht. Dies erhöht die Performance und Reaktionszeit der Applikation * @param ref */ export default function useOnScreen(ref: RefObject) { const observerRef = useRef(null); const [isOnScreen, setIsOnScreen] = useState(false); useEffect(() => { observerRef.current = new IntersectionObserver(([entry]) => setIsOnScreen(entry.isIntersecting) ); }, []); useEffect(() => { if (observerRef.current && ref.current) { observerRef.current.observe(ref.current); return () => { observerRef.current && observerRef.current.disconnect(); }; } }, [ref]); return isOnScreen; }