@paprika/pagination
Description
The Pagination component allows the user to select a page from a range of pages.
Installation
yarn add @paprika/pagination
or with npm:
npm install @paprika/pagination
Props
Pagination
| Prop | Type | required | default | Description |
|---|---|---|---|---|
| currentPage | number | true | - | The number of current active page |
| onChange | func | false | () => {} | Callback to be executed when current page is changed. |
| size | [ Pagination.types.size.SMALL, Pagination.types.size.MEDIUM, Pagination.types.size.LARGE] | false | Pagination.types.size.MEDIUM | The number of other pages that will be visible around the current/active page (not hidden by elipsis). Can be set to small, medium, or large |
| totalPages | number | true | - | The number of total pages. |
Pagination
The Pagination component allows the user to select a page from a range of pages.
Usage
To create a Pagination simply add the <Pagination /> component.
Total Pages
To set the amount of pages for the Pagination component use the totalPages property.
<Pagination totalPages={12} />Current Page
To set the currently active page use the currentPage property. This will highlight the currently active page.
<Pagination totalPages={12} currentPage={2} />