mg-js/esm/hooks/useLazyScrolling.js

A set of useful functions, components and hooks.

import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useEffect, useRef } from 'react';
const useLazyScrolling = ({ distance = "0px", initPage = 0 } = {}, callback) => {
    const ref = useRef(null);
    const refPage = useRef(initPage);
    const Intersector = useCallback(() => {
        return _jsx("div", { style: { height: "1px", width: "1px" }, className: 'intersector', ref: ref });
    }, []);
    useEffect(() => {
        let observer = new IntersectionObserver(([{ isIntersecting }]) => {
            console.log("intrersecting");
            if (isIntersecting) {
                callback(refPage.current++);
            }
        }, { root: null, rootMargin: distance });
        observer.observe(ref.current);
        return () => observer.unobserve(ref.current);
    }, []);
    return { Intersector };
};
export default useLazyScrolling;