Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
__tests__
components
Pagination.stories.js
README.md
consts.js
index.js
index.js.flow

README.md

Pagination

To implement Pagination component into your project you'll need to the import:

import Pagination from "@kiwicom/orbit-components/lib/Pagination";

After adding import into your project you can use it simply like:

<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
pageCount number The page count to render into separated buttons. See Functional specs
selectedPage number 1 The index number of the selected page.
size 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.:

<Pagination onPageChange={(selectedPage) => doSomething(selectedPage)} />
You can’t perform that action at this time.