WUI logo

Pagination

The Pagination component is a navigational element that divides content into discrete pages, allowing users to navigate through large sets of data or content efficiently. It provides controls to move between pages, such as next, previous, and specific page numbers. This component is essential for enhancing user experience by making large amounts of information more manageable and accessible.

Source@welcome-ui/pagination
Props
import * as React from 'react'
import { Pagination, PaginationProps } from '@welcome-ui/pagination'


const Example = () => {
  const [page, setPage] = React.useState<PaginationProps['page']>(8)


  return (
    <Pagination
      aria-label="Pagination"
      getHref={page => `?page=${page}`}
      onChange={page => setPage(Number(page))}
      page={page}
      pageCount={10}
    />
  )
}


export default Example

Installation

1

Run the following command:

yarn add @welcome-ui/pagination
2

Import component:

import { Pagination } from '@welcome-ui/pagination'

Examples

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 navigation

Set custom previous and next buttons using leftArrow and rightArrow.

LinkTabs