Components
Pagination
A navigation control for traversing paginated content.
Installation
npm install @mijn-ui/react-paginationUsage
import {
Pagination,
PaginationContent,
PaginationList,
PaginationNextButton,
PaginationNextEllipsis,
PaginationPreviousButton,
PaginationPreviousEllipsis,
} from @mijn-ui/react-paginationconst [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>API Reference
Standard element attributes are forwarded to the underlying component in addition to the props below.
| Prop | Type | Default | Description |
|---|---|---|---|
unstyled | boolean | false | Opt out of the default styles to fully customize the component. |
classNames | object | — | Override classes per slot (see Style Slots below). |
className | string | — | Additional classes for the root element. |
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. |