@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} />

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG