WUI logo

Pagination

Allows user to switch between pages of a list items.

version

4.2.0

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 (
<Pagination
aria-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 (
<Pagination
aria-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 (
<Pagination
aria-label="Pagination"
getHref={page => `?page=${page}`}
page={page}
onChange={setPage}
pageCount={10}
leftArrow={<CrownIcon size="xs" />}
rightArrow={<CrownIcon size="xs" />}
/>
)
}

Properties #

NameType(s)DefaultRequired
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>>

Packages #

Dependencies #
Peer dependencies #

Previous

Link

Next

Tabs