Pagination
Pagination splits a large amount of content across several pages.
Install
One package and one stylesheet. The stylesheet holds the tokens every component uses.
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 | None | How many pages there are. People need the total to see where they are. |
| defaultSelected | number | 1 | The page shown first, counted from one. |
| onChange | (page: number) => void | None | 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 people can jump to it instead of hunting for it 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 can be told apart out of context.