Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProPage numbers, page ranges with ellipses and from-to counts for a paginated list or table, controlled or uncontrolled.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it to drive a pager UI and slice data: you get the current page, the list of page buttons with gaps, and the item range to show.
Do not use it for infinite scroll (use useInfiniteScroll) or for server cursors, where there are no page numbers.
import { usePagination } from "@/hooks/use-pagination"const { page, pageCount, range, from, to, next, prev, setPage } = usePagination(
{ total: 245, pageSize: 20 }
)
const visible = rows.slice(from - 1, to)usePagination(options): Pagination
| Option | Type | Default | Description |
|---|---|---|---|
total | number | - | Total number of items. |
pageSize | number | 10 | Items per page. |
page | number | - | Controlled page (1-based). |
defaultPage | number | 1 | Initial page when uncontrolled. |
siblings | number | 1 | Page buttons shown each side of the current page. |
onPageChange | (page: number) => void | - | Called with the new page. |
Returns page, pageCount, setPage, next, prev, first, last, hasNext, hasPrev, from and to (1-based item range, 0 when empty), and range: an array of page numbers and "ellipsis" markers, for example [1, "ellipsis", 4, 5, 6, "ellipsis", 20]. The page is clamped to the valid range, including when total shrinks.
Render the pager as <nav aria-label="Pagination"> with a list of buttons, mark the current one with aria-current="page", give Previous and Next real names, disable them at the ends and announce the new range (for example "Showing 21 to 40 of 245") in a polite live region.
The hook ships with renderHook tests (use-pagination.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.