Pagination
Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { Pagination } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| pages * | number | — | How many pages there are. The reader needs the total to judge where they are. |
| defaultSelected | number | 1 | The page shown first, counted from one. |
| onChange | (page: number) => void | — | Called with the new page number. Fetching it is yours to do. |
| label | string | 'Pagination' | Names the control for assistive technology. Say what is being paged. |
Accessibility
What the component does for you, and what it needs from you.
- The control is a navigation landmark, so it can be jumped to rather than hunted for at the end of a list.
- The current page is marked as current, so it is announced rather than only coloured.
- Each page control names its page, so they are distinguishable from one another out of context.