npm package: @paprika/pagination
Description: The Pagination component allows the user to select a page from a range of pages.
Author: @paprika
Latest version: 4.0.4

<!-- start: Autogenerated - do not modify -->

# @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.                                                                                                                   |

<!-- end: Autogenerated - do not modify -->
<!-- content -->

## 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.

```js
<Pagination totalPages={12} />
```

#### Current Page

To set the currently active page use the `currentPage` property. This will highlight the currently active page.

```js
<Pagination totalPages={12} currentPage={2} />
```

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/navigation-pagination--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/Pagination/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/pagination%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [CHANGELOG](https://github.com/acl-services/paprika/tree/master/packages/Pagination/CHANGELOG.md)