usePagination

new

Paginated Firestore queries with automatic cursor management.

Usage

usePagination manages the startAfter cursor automatically. Call loadMore to fetch the next page; documents accumulate in the data array.

usePagination

import { usePagination } from 'refirebase/react';

function PostList() {
  const { data, loading, loadingMore, hasMore, loadMore, error } = usePagination('posts', {
    orderBy: [{ field: 'created_at', direction: 'desc' }],
    pageSize: 20,
  });

  if (loading) return <p>Loading...</p>;

  return (
    <div>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>

      {hasMore && (
        <button onClick={loadMore} disabled={loadingMore}>
          {loadingMore ? 'Loading...' : 'Load more'}
        </button>
      )}
    </div>
  );
}

Parameters

Param	Type	Description
`collectionName*`	`string`	Firestore collection path.
`options.pageSize`	`number`	Documents per page.(default: `20`)
`options.where`	`WhereCondition`	Filter conditions.
`options.orderBy`	`{ field, direction }[]`	Sort order.

Return value

Param	Type	Description
`data`	`T[]`	Accumulated documents from all loaded pages.
`loading`	`boolean`	True during the initial load.
`loadingMore`	`boolean`	True while loading the next page.
`hasMore`	`boolean`	False when all pages have been loaded.
`loadMore`	`() => void`	Load the next page.
`error`	`unknown \| null`	Error from the last operation.

← PrevioususeValue Next →useUploadTask