Pagination
Install and import #
Usage #
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^3.0.0
- - @welcome-ui/icons.right^3.0.0
- - @welcome-ui/system^3.0.0
- - @welcome-ui/utils^3.4.3
- - reakit^1.3.6
Peer dependencies #
- - @xstyled/styled-components^2.2.3
- - @xstyled/system^2.2.3
- - prop-types^15.7.2
- - react^16.10.2 || ^17.0.1
- - react-dom^16.10.2 || ^17.0.1
- - styled-components^5.2.1