Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including paginorm with all npm packages installed. Try it out:

require("react-dom/package.json"); // react-dom is a peer dependency. require("react/package.json"); // react is a peer dependency. var paginorm = require("paginorm")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

paginorm v1.0.2

Simple, easy to use component for pagination. Compatible with bootstrap paginator stylesheets

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

Example

Params

NameTypeDefaultDescription
totalItemsCountNumberTotal count of items which you are going to display
onChangeFunctionPage change handler. Receive pageNumber as arg
acivePageNumber1Active page
itemsCountPerPageNumber10Count of items per page
pageRangeDisplayedNumber5Range of pages in paginator, exclude navigation blocks (prev, next, first, last pages)
firstPageTextString / ReactElement«Text of first page navigation button or whole element
lastPageTextString / ReactElement»Text of last page navigation button or whole element
prevPageTextString / ReactElementText of prev page navigation button or whole element
nextPageTextString / ReactElementText of next page navigation button or whole element
classNameString"pagination"ClassName for the pagination ul
firstPageClassNameStringClassName for the first page link
lastPageClassNameStringClassName for the last page link
prevPageClassNameStringClassName for the previous page link
nextPageClassNameStringClassName for the next page link
allItemsClassNameStringClassName for the all pagination links
activeClassNameStringClassName for the active page
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free