Have ideas to improve npm?Join in the discussion! »

    react-paginating
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.0 • Public • Published

    React Paginating

    Build Status CircleCI cypress

    CircleCI codecov npm version License: MIT PRs Welcome

    gzip size module formats Greenkeeper badge Package Quality

    Package Quality

    Motivation

    During development, we were facing problems supporting server-rendering of our web app & SEO (require pagination links). To solve that, we had to add 2 snippets of code, one to support the server-side and another to support the client-side which lead to being hard for maintenance. Most of the pagination libraries only support client-rendering by attaching event handlers on the pagination button to redirect. Because of that, we created this library which allows flexibly to customize behaviors (attaching event handlers or href attribute) and user interface.




    The component applied Render Props 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:

    .bg-red {
      background-color: red;
    }
    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, e) => {
        this.setState({
          currentPage: page
        });
      };
     
      render() {
        const { currentPage } = this.state;
        return (
          <div>
            <ul>
              {fruits[currentPage - 1].map(item => <li key={item}>{item}</li>)}
            </ul>
            <Pagination
              className="bg-red"
              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
                        {...getPageItemProps({
                          pageValue: page,
                          key: page,
                          style: activePage,
                          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

    className

    string

    Customizable style for pagination wrapper

    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:

    Contributors


    Dzung Nguyen

    📖 💻 🤔 👀 🐛

    Chau Tran

    💻 🤔 👀 🐛

    Faris Abusada

    💻 🐛

    Install

    npm i react-paginating

    DownloadsWeekly Downloads

    2,020

    Version

    1.4.0

    License

    MIT

    Unpacked Size

    44.1 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar