Pagination

Installation

NPM packages are currently unstable and may cause issues. Use it at your own risk.

npm install @mijn-ui/react-pagination

Usage

import {
  Pagination,
  PaginationContent,
  PaginationList,
  PaginationNextButton,
  PaginationNextEllipsis,
  PaginationPreviousButton,
  PaginationPreviousEllipsis,
} from @mijn-ui/react-pagination

const [currentPage, setCurrentPage] = React.useState(7)
const ItemsPerPage = 10
const TotalPage = 160

<Pagination
  totalPages={TotalPage}
  currentPage={currentPage}
  itemsPerPage={ItemsPerPage}
  onChangePage={setCurrentPage}
>
  <PaginationContent>
    <PaginationPreviousButton>Previous</PaginationPreviousButton>
    <PaginationPreviousEllipsis />
    <PaginationList />
    <PaginationNextEllipsis />
    <PaginationNextButton>Next</PaginationNextButton>
  </PaginationContent>
</Pagination>

Pagination Style Slots

Slot Name	Targeted Component	Purpose
`base`	`Pagination`	Styles the root pagination component.
`content`	`PaginationContent`	Styles the content area of the pagination.
`list`	`PaginationList`	Styles the list container for pagination items.
`listItem`	`PaginationList`	Styles individual pagination items.
`previousBtn`	`PaginationPreviousButton`	Styles the button for the previous page.
`previousElipsis`	`PaginationPreviousElipsis`	Styles the ellipsis before the previous page.
`nextBtn`	`PaginationNextButton`	Styles the button for the next page.
`nextElipsis`	`PaginationNextElipsis`	Styles the ellipsis after the next page.

Installation

Usage

Pagination Style Slots

On this page