A hook to observe when the uses has scrolled to on page

useIntersectionObserver.ts

import React, { useEffect } from 'react';

interface IntersectionObserverProps {
    root?: React.RefObject<Element | null>;
    target: React.MutableRefObject<HTMLElement | null>;
    onIntersect: () => void;
    threshold?: number | number[];
    rootMargin?: string;
    enabled?: boolean;
}

export default function useIntersectionObserver({
    root,
    target, // loadMoreRef
    onIntersect, // fetchNextPage
    threshold = 1, // set as 1 or 0
    rootMargin = '0px',
    enabled = true, // hasNextPage
}: IntersectionObserverProps): void {
    useEffect(() => {
        if (!enabled) {
            return;
        }

        const observer = new IntersectionObserver(
            (entries) => entries.forEach((entry) => entry.isIntersecting && onIntersect()),
            {
                root: root && root.current,
                rootMargin,
                threshold,
            }
        );

        const el = target && target.current;

        if (!el) {
            return;
        }

        observer.observe(el);

        return () => {
            observer.unobserve(el);
        };
    }, [target.current, enabled]); // eslint-disable-line react-hooks/exhaustive-deps
}