https://github.com/iq-tech/reactnator

https://github.com/iq-tech/reactnator

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/iq-tech/reactnator
• Owner: IQ-tech
• Created: 2018-03-22T15:53:31.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-05-22T15:33:37.000Z (over 6 years ago)
• Last Synced: 2023-12-24T15:37:35.355Z (about 1 year ago)
• Language: JavaScript
• Size: 87.9 KB
• Stars: 4
• Watchers: 12
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Reactnator

The easier way to paginate things

### Installing

In your project folder, type on console

`yarn add reactnator`

or you can use NPM aswell

`npm i reactnator`

### Dependencies

* React

* ReactDOM

* Recompose

* scroll-to-target

### Next Features

* Integration with React-Router (Today you can use `onChange` callback with browserHistory.push)

### Api Reference

| Property | Type | Default | Description |

| --- | --- | --- | --- |

| total | number | `1` | total of pages |

| currentPage | number | `1` | page number that will receive `active` class |

| onChange | function | `page => console.log(page)`  | onChange handler, that receive `page` with new current page value |

| scrollTo | object | `false` | allows scroll to some point on click, this object receive these following values `{ selector: #valid-dom-element, speed: 1, offset: 0}` |

| type | string | `button` | this prop will decide how type of pagination you want; button, link or history (not yet)  |

| link | string | `#` | URL who reactnator will add pagination's number. Example with default values: `#1` |

| pageNumberStyle | `string` | `reactnator__page-number` | optional style to page numbers |

| activePageStyle | `string` | `reactnator__page-number--active` | optional style to active page number |

### License

Licensed under the MIT license.