Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kidjp85/react-recompose-pagination
Fully customizable react pagination component
https://github.com/kidjp85/react-recompose-pagination
pagination pagination-react react-pager react-paginate react-pagination recompose-pagination
Last synced: about 2 months ago
JSON representation
Fully customizable react pagination component
- Host: GitHub
- URL: https://github.com/kidjp85/react-recompose-pagination
- Owner: kidjp85
- License: mit
- Created: 2018-02-12T11:39:12.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-03-18T05:56:46.000Z (almost 7 years ago)
- Last Synced: 2023-11-03T18:20:49.504Z (about 1 year ago)
- Topics: pagination, pagination-react, react-pager, react-paginate, react-pagination, recompose-pagination
- Language: JavaScript
- Homepage:
- Size: 73.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
react-recompose-pagination ( Newest version 0.1.4 )
======================================
> Fully customizable react pagination component
PROPS
================================
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| total | Number | | REQUIRED - Total page count |
| currentPage | Number | | REQUIRED - Current active page |
| onChange | Function | | REQUIRED - Handler callback function |
| displayRange | Number | 3 | Number of page to display from left and right of current page |
| ContainerEl | String | 'nav' | Element type for container |
| containerClass | String | 'react-recompose-pagination' | Container class name |
| WrapperEl | String | 'ul' | Element type for wrapper |
| wrapperClassName | String | 'react-recompose-pagination__wrapper' | Wrapper class name |
| PageEl | String | 'li' | Element type for page |
| pageClassName | String | 'react-recompose-pagination__page' | Page class name |
| first | String or Element or Node | 'First' | First button content |
| firstClassName | String | 'react-recompose-pagination__first' | First button class name |
| renderFirst | Function | () => {} | Render props function for first button |
| last | String or Element or Node | 'Last' | Last button content |
| firstClassName | String | 'react-recompose-pagination__last' | Last button class name |
| renderFirst | Function | () => {} | Render props function for last button |
| prev | String or Element or Node | '\u00AB' | Prev button content |
| prevClassName | String | 'react-recompose-pagination__prev' | Prev button class name |
| renderPrev | Function | () => {} | Render props function for prev button |
| next | String or Element or Node | '\u00BB' | Next button content |
| nextClassName | String | 'react-recompose-pagination__next' | Next button class name |
| renderNext | Function | () => {} | Render props function for next button |
| prevSet | String or Element or Node | '...' | Prev set content |
| prevSetClassName | String | 'react-recompose-pagination__prev-set' | Prev set class name |
| renderPrevSet | Function | () => {} | Render props function for prev set |
| nextSet | String or Element or Node | '...' | Next set content |
| nextSetClassName | String | 'react-recompose-pagination__next-set' | Next set class name |
| renderNextSet | Function | () => {} | Render props function for next set |
| hideFirstAndLast | Boolean | false | Check render first and last button |
DEMO
====
You can see the demo with example code [HERE](http://kidjp85.github.io/react-recompose-pagination/)
## Installation
By npm
```bash
npm install --save react-recompose-pagination
```
By Yarn
```bash
yarn add react-recompose-pagination
```
## You can also use the standalone UMD build
```html
```
## License
MIT