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