Open-code aq-ui React hook for Use Pagination.
aq-uipnpm dlx aq-ui@alpha add use-paginationImport the parts you need, then jump to an export for its contract.
"use client"
import { usePagination } from "@/hooks/use-pagination"Public function export from Use Pagination.
function createPaginationRange(page: number, pageCount: number, siblingCount = 1, boundaryCount = 1): PaginationToken[]PaginationToken[]| Name | Type | Default |
|---|---|---|
page | number | — |
pageCount | number | — |
siblingCount? | — | 1 |
boundaryCount? | — | 1 |
Type contract for PaginationControls.
interface PaginationControls| Name | Type |
|---|---|
page | number |
pageSize | number |
pageCount | number |
totalItems | number |
startIndex | number |
endIndex | number |
pages | PaginationToken[] |
items | PaginationItem[] |
canPrevious | boolean |
canNext | boolean |
setPage | (page: number) => void |
setPageSize | (pageSize: number) => void |
first | () => void |
previous | () => void |
next | () => void |
last | () => void |
Type contract for PaginationItem.
type PaginationItem = { … } | { … }| Name | Type |
|---|---|
type | "page" |
page | number |
key | string |
selected | boolean |
Type contract for PaginationToken.
type PaginationToken = number | "ellipsis"Open-code aq-ui React hook for Use Pagination.
function usePagination({ totalItems, page, defaultPage = 1, pageSize, defaultPageSize = 10, onPageChange, onPageSizeChange, siblingCount = 1, boundaryCount = 1, }: UsePaginationOptions): PaginationControlsPaginationControls| Name | Type |
|---|---|
options | UsePaginationOptions |
Type contract for UsePaginationOptions.
interface UsePaginationOptions| Name | Type | Default |
|---|---|---|
totalItems | number | — |
page? | number | — |
defaultPage? | number | 1 |
pageSize? | number | — |
defaultPageSize? | number | 10 |
onPageChange? | (page: number) => void | — |
onPageSizeChange? | (pageSize: number) => void | — |
siblingCount? | number | 1 |
boundaryCount? | number | 1 |
use-controllable-state