React pagination easy customize component.

react-pagination-custom

![npm version][npm-url]

TinyPagination is a best customizable tiny component you can find. It only handle logic, and you feel free for edit styles of number buttons, wrap container, spread,....

[npm-url]: https://www.npmjs.com/package/tiny-custom-pagination

!Notes

Installation

``
npm install react-pagination-custom --save
`

Properties


| Name |Required? | Type | Description |
| ------------- |:--------:|:------------:|:----------------------
| total | Yes | Number |Total of item list
| selectedPageId| Yes | Number |Selected page number
| itemPerPage | Yes | Number |Maximum item per one page
| renderBtnNumber| Yes | Function |Function return your customize button number component
| maxBtnNumbers| Yes | Number |Maximum buttons number will be show. If total of buttons is more than, buttons will bi collapse
| preKey | Yes | String | Key of previous button
| nextKey | Yes | String | Key of next button
| maxBtnPerSide | Yes | Number |Total of button in each side of selected button (default is 2)
| wrapStyle | No | Object | Style of root container
| wrapClass | No | String | Class of root container
| counterClass | No | String | Class of counter container
| counterStyle | No | String | Style of counter container
| btnsClass | No | Object | Class of buttons container
| btnsStyle | No | String | Style of buttons container
| spreadClass | No | String | Class of spread container
| spreadStyle | No | Object | Style of spread container




Usage

$3


`js
import {TinyPagination} from 'react-pagination-custom'
....
....
total = {...}
selectedPageId = {...}
itemPerPage = {...}
renderBtnNumber = {...}
maxBtnNumbers = {...}
preKey = '...'
nextKey = '...'
{...someOptionalProperties}
/>
`
Demo:

!Demo

Example

`js
import React from 'react'
import TinyPagination from 'tiny-custom-pagination'
import './App.css'
class App extends React.Component {

constructor(props){
super(props);
this.state = {...props};
this.changePage = this.changePage.bind(this);
this.renderBtnNumber = this.renderBtnNumber.bind(this);
}

changePage(id){
this.setState((prevState, props) => {
return {
...prevState,
selectedPageId: id
}
});
}

buttonPageClick(id){
let {selectedPageId} = this.state;
switch (id) {
case 'PRE':
this.changePage(selectedPageId - 1);
break;
case 'NEXT':
this.changePage(selectedPageId + 1);
break;
default:
this.changePage(id);
break;
}
}

renderBtnNumber(id){
let {selectedPageId} = this.state;
return(
onClick = {this.buttonPageClick.bind(this, id)}
key = {id}
className = {page ${selectedPageId === id? 'selected-page' : ''}}
>
{id}

);
}

render() {
let {selectedPageId, list} = this.state;
const itemPerPage = 5;
const maxBtnNumbers = 6;
let listShow = [...list];
listShow = listShow.splice((selectedPageId - 1) * itemPerPage, itemPerPage);
return (


)
}
}

App.defaultProps = {
selectedPageId: 1,
list: [
{name: 'item 1'},{name: 'item 2'},{name: 'item 3'},{name: 'item 4'},{name: 'item 5'},{name: 'item 6'},{name: 'item 7'},{name: 'item 8'},{name: 'item 9'},{name: 'item 10'},{name: 'item 11'},{name: 'item 12'},{name: 'item 13'},{name: 'item 14'},{name: 'item 15'},{name: 'item 16'},{name: 'item 17'},{name: 'item 18'},{name: 'item 19'},{name: 'item 20'},{name: 'item 21'},{name: 'item 22'},{name: 'item 23'},{name: 'item 24'},{name: 'item 25'},{name: 'item 26'},{name: 'item 27'},{name: 'item 28'},{name: 'item 29'},{name: 'item 30'},{name: 'item 31'},{name: 'item 32'},{name: 'item 33'},{name: 'item 34'},{name: 'item 35'},{name: 'item 36'},{name: 'item 37'},{name: 'item 38'},{name: 'item 39'},{name: 'item 40'},{name: 'item 41'},{name: 'item 42'},{name: 'item 43'},{name: 'item 44'},{name: 'item 45'},{name: 'item 46'},{name: 'item 47'},{name: 'item 48'}
],
}

export default App
`

$3


`css
.page{
padding: 5px;
margin: 5px;
}

.page.selected-page{
background-color: gray;
color: white;
}
``

Contributing

Feel free for discussion and implementing enhancement. Contact me in github

License

MIT