npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

paginorm

1.0.2 • Public • Published

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

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

install

npm i paginorm

Downloadsweekly downloads

0

version

1.0.2

license

Apache-2.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
Report a vulnerability