useOffsetPagination

useOffsetPagination<T>(): UseOffsetPaginationResult<T>

Defined in: packages/pagination/src/use-offset-pagination.ts:77

React hook for offset-based (page number) pagination with React Router loader data.

Reads the current page data from React Router’s useLoaderData() and provides a goToPage function that navigates by updating the ?page= URL search parameter.

Type Parameters

T

T = unknown

The item type in the paginated list.

Returns

UseOffsetPaginationResult<T>

A UseOffsetPaginationResult with items, page metadata, and a goToPage function.

Example

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

function PostList() {
  const { items, currentPage, totalPages, goToPage } = useOffsetPagination<Post>();
  return (
    <>
      {items.map(post => <PostCard key={post.id} post={post} />)}
      <Pagination current={currentPage} total={totalPages} onChange={goToPage} />
    </>
  );
}