usePagination
Headless pagination: the current page, the page numbers to render with ellipses for the gaps, and handlers to move between pages. Build your own pager with it;
Pagination is built on it.usePagination({ total, value?, defaultValue?, onChange?, siblings?, boundaries? }) returns { page, range, setPage, next, previous, first, last }. range lists the page numbers to render, with 'ellipsis' for each gap. It is always the same length for a given total, so the pager keeps its width as you page through.siblings (default 1) sets how many pages show on each side of the current one, and boundaries (default 1) how many at each end. An ellipsis never stands in for a single page: that page is shown instead. Pass value + onChange to control the page. Out-of-range pages are clamped, and moves to the current page are ignored. The plain getPaginationRange(page, total, siblings, boundaries) function is exported too.Loading demo…
import { Block, Button, IconButton, Row, Text, usePagination } from '@plocks/ui';
export function Demo() {
const { page, range, setPage, next, previous } = usePagination({ total: 20, defaultValue: 7 });
return (
<Block fullWidth align="center">
<Row gap="xs" align="center" wrap="wrap">
<IconButton icon="chevron-left" variant="ghost" accessibilityLabel="Previous page" disabled={page === 1} onPress={previous} />
{range.map((item, index) =>
item === 'ellipsis' ? (
<Text key={`gap-${index}`} c="muted">
…
</Text>
) : (
<Button key={item} size="sm" variant={item === page ? 'filled' : 'ghost'} onPress={() => setPage(item)}>
{item}
</Button>
)
)}
<IconButton icon="chevron-right" variant="ghost" accessibilityLabel="Next page" disabled={page === 20} onPress={next} />
</Row>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources