simple-react-pagination-js
v1.1.3
Published
simple-pagination
Downloads
170
Maintainers
Readme
simple-react-pagination-js
Simple with zero dependency Pagination library. Demo
Installation
$ npm install simiple-react-pagination-js
Usage
import React from "react";
import SPagination from "simple-react-pagination-js";
import "simple-react-pagination-js/build/style.css"; // import css
class App extends React.Component{
constructor(props){
super(props);
this.state = {
page: 1,
size: 10
}
}
handleOnPageChange = (page) => {
this.setState({page})
}
handleOnSizeChange = (size) => {
this.setState({size, page: 1})
}
render(){
return(
<SPagination page={this.state.page}
sizePerPage={this.state.size}
totalSize={100}
pagesNextToActivePage={1}
onPageChange={this.handleOnPageChange}
onSizeChange={this.handleOnSizeChange}/>
)
}
}
Props
| Name | Type | Default | Description |
| ------------------- | -------- | --------- | -------------------------------------------------------------------- |
| totalSize
| Number | | Required. Total data size |
| sizePerPage
| Number | 10 | Optional. Number of data to display in each page |
| page
| Number | | Required. Active page number |
| onChangePage
| Function | | Required. Callback function for page change. |
| onChangeSize
| Function | | Required. Callback function for size change. |
| sizePerPageOptions
| [10, 25] Or [{value: 10: label: "10 Items"}, {value: 10: label: "10 Items"}] | | Optional. Drop Down Select option for sizePerPage | [10, 25, 50, 100] |
| pagesNextToActivePage
| Number | 1 | Optional. Number of page to show next to active page check demo |