react-pagination-js

Simple and light weight pagination for react. This library is updated version of react-pagination-library. It comes with five themes and are easy to customize.

1. default
2. dark
3. bootstrap
4. border-bottom
5. circle

Demo

click here for live demo.

Installation

$ npm install react-pagination-js

Usage

import React from "react";
import Pagination from "react-pagination-js";
import "react-pagination-js/dist/styles.css"; // import css

class App extends React.Component {
  state = {
    currentPage: 1
  };
  changeCurrentPage = numPage => {
    this.setState({ currentPage: numPage });
    //fetch a data
    //or update a query to get data
  };
  render() {
    return (
      <div>
        <Pagination
          currentPage={this.state.currentPage}
          totalPages={10}
          changeCurrentPage={this.changeCurrentPage}
        />
        <h2>current Page:{this.state.currentPage}</h2>
      </div>
    );
  }
}
export default App;

Props

| Name | Type | Default | Description | | ------------------- | -------- | --------- | -------------------------------------------------------------------- | | totalSize | Number | | Required. Total data size | | sizePerPage | Number | 10 | Optional. Number of data to display in page | | currentPage | Number | 1 | Required. Active page number | | changeCurrentPage | Function | | Required. Page change handler. Receive current pageNumber as arg | | theme | string | default | Optional. theme : default,dark, bootstrap, border-bottom, circle | | showFirstLastPages| boolean | true | Optional. Show or hide first and last page. | | firstPageText | string | « | Optional. first page text. | | lastPageText | string | » | Optional. last page text. | | nextPageText | string | ⟩ | Optional. next page text. | | numberOfPagesNextToActivePage | Number | 1 | Optional. Number of page to show next to active page |