useInfiniteScroll

useInfiniteScroll<T>(options?): UseInfiniteScrollResult<T>

Defined in: packages/pagination/src/use-infinite-scroll.ts:60

React hook for infinite scroll with automatic loading via IntersectionObserver.

Wraps usePagination and triggers loadMore when a sentinel element enters the viewport. Attach the returned sentinelRef to an empty <div> at the bottom of your list to enable automatic page loading on scroll.

Type Parameters

T

T = unknown

The item type in the paginated list.

Parameters

options?

UseInfiniteScrollOptions<T>

Optional configuration including rootMargin for the IntersectionObserver and a custom key extractor.

Returns

UseInfiniteScrollResult<T>

A UseInfiniteScrollResult with items, a sentinel ref, and loading state.

Example

import { useInfiniteScroll } from "@cfast/pagination";

function PostFeed() {
  const { items, sentinelRef, isLoading } = useInfiniteScroll<Post>();
  return (
    <>
      {items.map(post => <PostCard key={post.id} post={post} />)}
      <div ref={sentinelRef} />
      {isLoading && <Spinner />}
    </>
  );
}