use-load-more

Installation

Usage

useLoadMore pages through local (in-memory) data: keep the full array, render only items.slice(0, visibleCount), and attach sentinelRef to an empty element after the list. When the sentinel comes within rootMargin of the viewport, the next page is revealed automatically. The observer re-arms after every growth, so a short page keeps loading until the sentinel is pushed out of range.

import { useLoadMore } from "@/ui";

function PhotoFeed({ photos }: { photos: Photo[] }) {
  const { visibleCount, hasMore, loadMore, sentinelRef } = useLoadMore({
    total: photos.length,
    pageSize: 12,
  });
  const visible = photos.slice(0, visibleCount);

  return (
    <>
      {visible.map((photo) => (
        <PhotoCard key={photo.id} photo={photo} />
      ))}
      {hasMore ? (
        <div ref={sentinelRef} aria-hidden className="h-px" />
      ) : (
        <p>All {photos.length} loaded</p>
      )}
    </>
  );
}

To load inside a scrollable container instead of the page, pass the container as root and shrink rootMargin accordingly. Pair it with Masonry for a load-more waterfall.

API Reference

Options (UseLoadMoreOptions)

Returns (UseLoadMoreReturn)