usePagination

usePagination<T>(options?): UsePaginationResult<T>

Defined in: packages/pagination/src/use-pagination.ts:108

React hook for cursor-based pagination with React Router loader data.

Accumulates pages as the user loads more and deduplicates items by key to handle data changes during scrolling. Reads initial data from React Router’s useLoaderData() and fetches subsequent pages via useFetcher().

Type Parameters

T

T = unknown

The item type in the paginated list.

Parameters

options?

UsePaginationOptions<T>

Optional pagination configuration (e.g., custom key extractor).

Returns

UsePaginationResult<T>

A UsePaginationResult with items, loading state, and a loadMore callback.

Example

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

function PostList() {
  const { items, loadMore, hasMore, isLoading } = usePagination<Post>();
  return (
    <>
      {items.map(post => <PostCard key={post.id} post={post} />)}
      {hasMore && <button onClick={loadMore} disabled={isLoading}>Load more</button>}
    </>
  );
}