react-infinite-scroll-hook/dist/index.mjs

A simple hook to create infinite scroll components

// src/use-infinite-scroll.ts
import { useEffect, useRef } from "react";
import {
  useTrackVisibility
} from "react-intersection-observer-hook";
var DEFAULT_DELAY_IN_MS = 100;
function useInfiniteScroll({
  loading,
  hasNextPage,
  onLoadMore,
  rootMargin,
  disabled,
  delayInMs = DEFAULT_DELAY_IN_MS
}) {
  const savedCallbackRef = useRef(onLoadMore);
  const [ref, { rootRef, isVisible }] = useTrackVisibility({
    rootMargin
  });
  useEffect(() => {
    savedCallbackRef.current = onLoadMore;
  }, [onLoadMore]);
  const shouldLoadMore = !disabled && !loading && isVisible && hasNextPage;
  useEffect(() => {
    if (shouldLoadMore) {
      const timer = setTimeout(() => {
        savedCallbackRef.current();
      }, delayInMs);
      return () => {
        clearTimeout(timer);
      };
    }
  }, [shouldLoadMore, delayInMs]);
  return [ref, { rootRef }];
}
var use_infinite_scroll_default = useInfiniteScroll;
export {
  use_infinite_scroll_default as default
};