UNPKG

@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
# 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)} /> ```