KK React Pagination

Pagination component for ReactJS

KK React Pagination

Installation / Download

NPM

npm install --save kk-react-pagination

Import

ES6:

import Pagination from 'kk-react-pagination';

import 'kk-react-pagination/lib/assets/style.css';

(optional) import 'kk-react-pagination/lib/assets/templates/simple.css';

or

(optional) import 'kk-react-pagination/lib/assets/templates/clean.css';

Examples

<pagination name="demo"> (content) </pagination>

(More examples you can find here)

Options

| option | default | description | |-------------|-----------------|-------------| | name | '' (string) | | | pageSize | 5 (number) | | | startPage | 1 (number) | | | prevLabel | prev (string or component) | | | nextLabel | next (string or component) | | | emptyListMsg | Nothing to display (string) | | | loader | Loading... (string or component) | | | align | center (string) | left ; center ; right | | onePageHide | false (bool) | Hide pagination when is only one page. | | openPageByElementId | 0 (number) | Must be unique. | | displayedPages | 5 (number) | How many page numbers should be visible while navigating. | | request | Function (Promice) | The function that sends a request to the server and returns Promise. | | component | Function (ReactJS Component) | This component will be used to render a single line from the list. Data provided by the server will be injected into it as properties. | | elementListClass | '' (string) | Additional class on the tag containing the list of elements. | | customClass | '' (string) | Additional class on the tag containing the pagination. | | afterPageChange | Function | Callback function after page change. |