useIsInViewPort.ts

import { useEffect, useMemo, useState } from "react";

function useIsInViewPort(ref) {
    const [isVisible, setIsVisible] = useState(false);

    const observer = useMemo(() => {
        return new IntersectionObserver(
            ([entry]) => {
                setIsVisible(entry.isIntersecting);
            },
            { threshold: 0.5 },
        );
    }, [ref]);

    useEffect(() => {
        observer.observe(ref.current);

        return () => {
            observer.unobserve(ref.current);
        };
    }, [ref, observer]);

    return isVisible;
}