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.

`js
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 (

activePage={this.state.activePage}
itemsCountPerPage={10}
totalItemsCount={450}
pageRangeDisplayed={5}
onChange={this.handlePageChange.bind(this)}
/>

);
}
}

ReactDOM.render(, document.getElementById("root"));

`

Check Live example

!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

tag
activeClass | String | active | Class name of active
• tag
activeLinkClass | String | | Class name of active tag
itemClass | String | | Default class of the
• tag
itemClassFirst | String | | Class of the first
• tag
itemClassPrev | String | | Class of the previous
• tag
itemClassNext | String | | Class of the next
• tag
itemClassLast | String | | Class of the last
• tag
disabledClass | String | disabled | Class name of the first, previous, next and last
• 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 tag
linkClassFirst | String | | Class of the first tag
linkClassPrev | String | | Class of the previous tag
linkClassNext | String | | Class of the next tag
linkClassLast | String | | Class of the last ` tag