react-js-pagination

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 "../components/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		Total count of items which you are going to display
onChange	Function		Page change handler. Receive pageNumber as arg
activePage	Number	1	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
innerClass	String	pagination	Class name of <ul> tag
activeClass	String	active	Class name of active <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 page, next page) if they are disabled.