<!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
<!-- This file is created by the `pnpm generate-readme` script. -->

# Pagination

## Description

Components for navigating through pages of items

## Installation

```
pnpm add @commercetools-uikit/pagination
```

```
npm --save install @commercetools-uikit/pagination
```

Additionally install the peer dependencies (if not present)

```
pnpm add react react-intl
```

```
npm --save install react react-intl
```

## Usage

```jsx
import { Pagination } from '@commercetools-uikit/pagination';

const Example = () => {
  const items = [{ id: '1' }, { id: '2' }];
  return (
    <Pagination
      totalItems={items.length}
      page={1}
      onPageChange={() => {}}
      onPerPageChange={() => {}}
    />
  );
};

export default Example;
```

## Properties

| Props             | Type                                                        | Required | Default | Description                                                                                                                              |
| ----------------- | ----------------------------------------------------------- | :------: | ------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `totalItems`      | `number`                                                    |    ✅    |         | Total number of items across all pages                                                                                                   |
| `page`            | `number`                                                    |    ✅    |         | The current page                                                                                                                         |
| `onPageChange`    | `Function`<br/>[See signature.](#signature-onpagechange)    |    ✅    |         | A callback function, called when the page is changed.                                                                                    |
| `perPage`         | `number`                                                    |          | `20`    | Number of items per page, according to the pre-defined range values.                                                                     |
| `perPageRange`    | `TPageRangeSize`                                            |          | `'s'`   | Range of items per page.&#xA;<br/>&#xA;`xs: 5,10,15,20`&#xA;<br/>&#xA;`s: 20,50`&#xA;<br/>&#xA;`m: 20,50,100`&#xA;<br/>&#xA;`l: 200,500` |
| `onPerPageChange` | `Function`<br/>[See signature.](#signature-onperpagechange) |    ✅    |         | A callback function, called when `perPage` is changed.                                                                                   |

## Signatures

### Signature `onPageChange`

```ts
(newPage: number) => void
```

### Signature `onPerPageChange`

```ts
(newPerPage: number) => void
```