@commercetools-uikit/pagination
Version:
Components for navigating through pages of items
74 lines (53 loc) • 2.94 kB
Markdown
<!-- 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.
<br/>
`xs: 5,10,15,20`
<br/>
`s: 20,50`
<br/>
`m: 20,50,100`
<br/>
`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
```