Simple and light weight pagination for react. This library is updated version of react-pagination-library. It comes with five themes and are easy to customize.
- default
- dark
- bootstrap
- border-bottom
- circle
Demo
click here for live demo.
Installation
$ npm install react-pagination-js
Usage
import React from "react";
import Pagination from "react-pagination-js";
import "react-pagination-js/dist/styles.css";
class App extends React.Component {
state = {
currentPage: 1
};
changeCurrentPage = numPage => {
this.setState({ currentPage: numPage });
};
render() {
return (
<div>
<Pagination
currentPage={this.state.currentPage}
totalPages={10}
changeCurrentPage={this.changeCurrentPage}
/>
<h2>current Page:{this.state.currentPage}</h2>
</div>
);
}
}
export default App;
Props
Name | Type | Default | Description |
---|
totalSize | Number | | Required. Total data size |
sizePerPage | Number | 10 | Optional. Number of data to display in page |
currentPage | Number | 1 | Required. Active page number |
changeCurrentPage | Function | | Required. Page change handler. Receive current pageNumber as arg |
theme | string | default | Optional. theme : default ,dark , bootstrap , border-bottom , circle |
showFirstLastPages | boolean | true | Optional. Show or hide first and last page. |
firstPageText | string | « | Optional. first page text. |
lastPageText | string | » | Optional. last page text. |
nextPageText | string | ⟩ | Optional. next page text. |
numberOfPagesNextToActivePage | Number | 1 | Optional. Number of page to show next to active page |