Pagination
Install and import
Example
onChange return page selected.
Range display
When your range display is above your pageCount, all the pages are shown.
Change range with rangeDisplay, by default it is 5.
Custom previous & next
Set custom previous and next buttons using leftArrow and rightArrow.
Properties
| Name | Type(s) | Default | Required |
|---|---|---|---|
| aria-label | string | ||
| children | node | ||
| getHref | func | ||
| leftArrow | node | ||
| onChange | func | ||
| page | number | ||
| pageCount | number | ||
| rangeDisplay | number | 5 | |
| rightArrow | node |
Dependencies
- - @welcome-ui/icons.left^2.0.2
- - @welcome-ui/icons.right^2.0.2
- - @welcome-ui/system^2.0.2
- - @welcome-ui/utils^2.0.2
- - reakit^1.1.1
Peer dependencies
- - @xstyled/styled-components^1.17.0
- - @xstyled/system^1.17.0
- - prop-types^15.7.2
- - react^16.10.2
- - react-dom^16.10.2
- - styled-components^4.0.0 || ^5.0.0