react-js-pagination
v3.0.3
Published
Simple, easy to use component for pagination. Compatible with bootstrap paginator stylesheets
Downloads
149,187
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 3 pagination stylesheets.
If you would like it to work for Bootstrap 4, you will need to add 2 additional props when using this component:
itemClass="page-item"
linkClass="page-link"
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.bind(this)}
/>
</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