@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
38 lines (30 loc) • 1.64 kB
Markdown
# Pagination
To implement Pagination component into your project you'll need to the import:
```jsx
import Pagination from "@kiwicom/orbit-components/lib/Pagination";
```
After adding import into your project you can use it simply like:
```jsx
<Pagination pageCount={1337} selectedPage={69} />
```
## Props
Table below contains all types of the props available in the Pagination component.
| Name | Type | Default | Description |
| :---------------- | :---------------- | :-------------- | :------------------------------- |
| dataTest | `string` | | Optional prop for testing purposes.
| hideLabels | `boolean` | `true` | If `false`, the Previous and Next labels will be hidden.
| **onPageChange** | `number => void` | | Function for handling onPageChange event. [See Functional specs](#functional-specs)
| **pageCount** | `number` | | The page count to render into separated buttons. [See Functional specs](#functional-specs)
| selectedPage | `number` | `1` | The index number of the selected page.
| size | [`enum`](#enum) | `"normal"` | The size of the Pagination.
### enum
| size |
| :---------- |
| `"small"` |
| `"normal"` |
### Functional specs
* If the `pageCount` will be bigger than 7, the compact version will be rendered.
* The prop `onPageChange` will return the new index of selected page. Use arrow function for it, e.g.:
```jsx
<Pagination onPageChange={(selectedPage) => doSomething(selectedPage)} />
```