Simple, lightweight, flexible pagination ReactJS component 1️⃣2️⃣3️⃣
Switch branches/tags
Nothing to show
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist update convention code Nov 26, 2017
examples added examples Nov 25, 2017
src/Pagination added declaration file Sep 23, 2018
typings added declaration file Sep 23, 2018
.babelrc completed pagination Nov 25, 2017
.eslintignore completed pagination Nov 25, 2017
.eslintrc completed pagination Nov 25, 2017
.gitignore completed pagination Nov 25, 2017
.travis.yml update travis & package.json Nov 25, 2017
LICENSE completed pagination Nov 25, 2017
README.md update readme Feb 7, 2018
_config.yml Set theme jekyll-theme-cayman Nov 25, 2017
jest.config.js completed pagination Nov 25, 2017
package.json 1.0.2 Sep 23, 2018
yarn.lock update travis & package.json Nov 25, 2017

README.md

React Paginating

Build Status codecov npm version License: MIT PRs Welcome

Simple lightweight pagination component.



The component applied Function as Child Components pattern. (You can read more about this pattern here).

This approach allows you to fully control UI component and behaviours.

See the intro blog post

Table content

Installation

npm install --save react-paginating

or

yarn add react-paginating

Usage

You can check out the basic demo here: https://codesandbox.io/s/z2rr7z23ol

import React from 'react';
import { render } from 'react-dom';
import Pagination from 'react-paginating';

const fruits = [
  ['apple', 'orange'],
  ['banana', 'avocado'],
  ['coconut', 'blueberry'],
  ['payaya', 'peach'],
  ['pear', 'plum']
];
const limit = 2;
const pageCount = 3;
const total = fruits.length * limit;

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      currentPage: 1
    };
  }

  handlePageChange = page => {
    this.setState({
      currentPage: page
    });
  };

  render() {
    const { currentPage } = this.state;
    return (
      <div>
        <ul>
          {fruits[currentPage - 1].map(item => <li key={item}>{item}</li>)}
        </ul>
        <Pagination
          total={total}
          limit={limit}
          pageCount={pageCount}
          currentPage={currentPage}
        >
          {({
            pages,
            currentPage,
            hasNextPage,
            hasPreviousPage,
            previousPage,
            nextPage,
            totalPages,
            getPageItemProps
          }) => (
            <div>
              <button
                {...getPageItemProps({
                  pageValue: 1,
                  onPageChange: this.handlePageChange
                })}
              >
                first
              </button>

              {hasPreviousPage && (
                <button
                  {...getPageItemProps({
                    pageValue: previousPage,
                    onPageChange: this.handlePageChange
                  })}
                >
                  {'<'}
                </button>
              )}

              {pages.map(page => {
                let activePage = null;
                if (currentPage === page) {
                  activePage = { backgroundColor: '#fdce09' };
                }
                return (
                  <button
                    key={page}
                    style={activePage}
                    {...getPageItemProps({
                      pageValue: page,
                      onPageChange: this.handlePageChange
                    })}
                  >
                    {page}
                  </button>
                );
              })}

              {hasNextPage && (
                <button
                  {...getPageItemProps({
                    pageValue: nextPage,
                    onPageChange: this.handlePageChange
                  })}
                >
                  {'>'}
                </button>
              )}

              <button
                {...getPageItemProps({
                  pageValue: totalPages,
                  onPageChange: this.handlePageChange
                })}
              >
                last
              </button>
            </div>
          )}
        </Pagination>
      </div>
    );
  }
}

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

Examples

Input Props

total

number

Total results

limit

number

Number of results per page

pageCount

number

How many pages number you want to display in pagination zone.

currentPage

number

Current page number

Child callback functions

getPageItemProps

function({ pageValue: number, onPageChange: func })

Allow to pass props and event to page item. When page is clicked, onPageChange will be executed with param value pageValue.

Note: This callback function should only use for paging with state change. If you prefer parsing page value from query url (Please don't use this callback function).

Controlled Props

pages

array: [number]

List of pages number will be displayed. E.g: [1, 2, 3, 4, 5]

currentPage

number

previousPage

number

nextPage

number

totalPages

number

hasNextPage

boolean

Check if it has next page or not.

hasPreviousPage

boolean

Check if it has previous page or not.

Alternatives

If you don’t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. Some of the more popular and actively maintained ones are: