Socket
Socket
Sign inDemoInstall

react-js-pagination

Package Overview
Dependencies
26
Maintainers
2
Versions
22
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-js-pagination

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


Version published
Maintainers
2
Weekly downloads
43,461
decreased by-10.83%

Weekly downloads

Readme

Source

Build Status

NPM

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.

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 (
      <div>
        <Pagination
          activePage={this.state.activePage}
          itemsCountPerPage={10}
          totalItemsCount={450}
          pageRangeDisplayed={5}
          onChange={this.handlePageChange.bind(this)}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Check Live example

Example

Params

NameTypeDefaultDescription
totalItemsCountNumberRequired. Total count of items which you are going to display
onChangeFunctionRequired. Page change handler. Receive pageNumber as arg
activePageNumber1Required. Active page
itemsCountPerPageNumber10Count of items per page
pageRangeDisplayedNumber5Range of pages in paginator, exclude navigation blocks (prev, next, first, last pages)
prevPageTextString / ReactElementText of prev page navigation button
firstPageTextString / ReactElement«Text of first page navigation button
lastPageTextString / ReactElement»Text of last page navigation button
nextPageTextString / ReactElementText of next page navigation button
getPageUrlFunctionGenerate href attribute for page
innerClassStringpaginationClass name of <ul> tag
activeClassStringactiveClass name of active <li> tag
activeLinkClassStringClass name of active <a> tag
itemClassStringDefault class of the <li> tag
itemClassFirstStringClass of the first <li> tag
itemClassPrevStringClass of the previous <li> tag
itemClassNextStringClass of the next <li> tag
itemClassLastStringClass of the last <li> tag
disabledClassStringdisabledClass name of the first, previous, next and last <li> tags when disabled
hideDisabledBooleanfalseHide navigation buttons (prev, next, first, last) if they are disabled.
hideNavigationBooleanfalseHide navigation buttons (prev page, next page)
hideFirstLastPagesBooleanfalseHide first/last navigation buttons
linkClassStringDefault class of the <a> tag
linkClassFirstStringClass of the first <a> tag
linkClassPrevStringClass of the previous <a> tag
linkClassNextStringClass of the next <a> tag
linkClassLastStringClass of the last <a> tag

Keywords

FAQs

Last updated on 18 Feb 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc