Pagination
Allows user to switch between pages of a list items.
version
4.1.2
install
yarn add @welcome-ui/pagination
usage
import { Pagination } from '@welcome-ui/pagination'
Usage #
onChange
return page selected.
function() {const [page, setPage] = React.useState(8)return (<Paginationaria-label="Pagination"getHref={page => `?page=${page}`}page={page}onChange={setPage}pageCount={10}/>)}
Range display #
When your range display is above your pageCount, all the pages are shown.
Change range with rangeDisplay
, by default it is 5
.
function() {const [page, setPage] = React.useState(1)return (<Paginationaria-label="Pagination"getHref={page => `?page=${page}`}page={page}onChange={setPage}pageCount={5}rangeDisplay={10}/>)}
Custom previous & next #
Set custom previous and next buttons using leftArrow
and rightArrow
.
function() {const [page, setPage] = React.useState(5)return (<Paginationaria-label="Pagination"getHref={page => `?page=${page}`}page={page}onChange={setPage}pageCount={10}leftArrow={<CrownIcon size="xs" />}rightArrow={<CrownIcon size="xs" />}/>)}
Properties #
Name | Type(s) | Default | Required |
---|---|---|---|
aria-label | string | ||
getHref | (page: string | number) => string | ||
leftArrow | ReactElement<any, string | JSXElementConstructor<any>> | ||
onChange | (page: string | number) => void | ||
page | number | ||
pageCount | number | ||
rangeDisplay | number | 5 | |
rightArrow | ReactElement<any, string | JSXElementConstructor<any>> |