README
react-js-pagination
A ReactJS dumb component to render a pagination.
The component comes with no built-in styles. HTML layout compatible with Bootstrap pagination stylesheets.
Installation
Install react-js-pagination
with npm:
$ npm install react-js-pagination
Usage
Very easy to use. Just provide props with total amount of things that you want to display on the page.
import React, { Component } from "react";
import ReactDOM from "react-dom";
import Pagination from "react-js-pagination";
require("bootstrap/less/bootstrap.less");
class App extends Component {
constructor(props) {
super(props);
this.state = {
activePage: 15
};
}
handlePageChange(pageNumber) {
console.log(`active page is ${pageNumber}`);
this.setState({activePage: pageNumber});
}
render() {
return (
<div>
<Pagination
activePage={this.state.activePage}
itemsCountPerPage={10}
totalItemsCount={450}
pageRangeDisplayed={5}
onChange={::this.handlePageChange}
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
Check Live example
Params
Name | Type | Default | Description |
---|---|---|---|
totalItemsCount |
Number | Required. Total count of items which you are going to display | |
onChange |
Function | Required. Page change handler. Receive pageNumber as arg | |
activePage |
Number | 1 |
Required. Active page |
itemsCountPerPage |
Number | 10 |
Count of items per page |
pageRangeDisplayed |
Number | 5 |
Range of pages in paginator, exclude navigation blocks (prev, next, first, last pages) |
prevPageText |
String / ReactElement | ⟨ |
Text of prev page navigation button |
firstPageText |
String / ReactElement | « |
Text of first page navigation button |
lastPageText |
String / ReactElement | » |
Text of last page navigation button |
nextPageText |
String / ReactElement | ⟩ |
Text of next page navigation button |
getPageUrl |
Function | Generate href attribute for page | |
innerClass |
String | pagination |
Class name of <ul> tag |
activeClass |
String | active |
Class name of active <li> tag |
activeLinkClass |
String | Class name of active <a> tag |
|
itemClass |
String | Default class of the <li> tag |
|
itemClassFirst |
String | Class of the first <li> tag |
|
itemClassPrev |
String | Class of the previous <li> tag |
|
itemClassNext |
String | Class of the next <li> tag |
|
itemClassLast |
String | Class of the last <li> tag |
|
disabledClass |
String | disabled |
Class name of the first, previous, next and last <li> tags when disabled |
hideDisabled |
Boolean | false |
Hide navigation buttons (prev, next, first, last) if they are disabled. |
hideNavigation |
Boolean | false |
Hide navigation buttons (prev page, next page) |
hideFirstLastPages |
Boolean | false |
Hide first/last navigation buttons |
linkClass |
String | Default class of the <a> tag |
|
linkClassFirst |
String | Class of the first <a> tag |
|
linkClassPrev |
String | Class of the previous <a> tag |
|
linkClassNext |
String | Class of the next <a> tag |
|
linkClassLast |
String | Class of the last <a> tag |