paginorm

paginorm

A ReactJS dumb component to render a pagination.

A fork of Sergey Vayser's component named react-js-pagination.

The component comes with no built-in styles. HTML layout compatible with Bootstrap pagination stylesheets.

Installation

Install paginorm with npm:

$ npm install paginorm

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 "paginorm";
require("bootstrap/less/bootstrap.less");

class App extends Component {
  constructor(props) {
    super();
    this.state = {
      activePage: 15
    };
    this.handlePageChange = ::this._handlePageChange;
  }

  _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"));

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
acivePage	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)
firstPageText	String / ReactElement	«	Text of first page navigation button or whole element
lastPageText	String / ReactElement	»	Text of last page navigation button or whole element
prevPageText	String / ReactElement	⟨	Text of prev page navigation button or whole element
nextPageText	String / ReactElement	⟩	Text of next page navigation button or whole element
className	String	"pagination"	ClassName for the pagination ul
firstPageClassName	String		ClassName for the first page link
lastPageClassName	String		ClassName for the last page link
prevPageClassName	String		ClassName for the previous page link
nextPageClassName	String		ClassName for the next page link
allItemsClassName	String		ClassName for the all pagination links
activeClassName	String		ClassName for the active page