Home

Awesome

react-paginate

NPM Build Status

A ReactJS component to render a pagination.

By installing this component and writing only a little bit of CSS you can obtain this: Note: You should write your own css to obtain this UI. This package do not provide any css.

<img src="https://cloud.githubusercontent.com/assets/2084833/24840237/7accb75a-1d1e-11e7-9abb-818431398b91.png" alt="Pagination demo 2" />

or

<img src="https://cloud.githubusercontent.com/assets/2084833/24840230/594e4ea4-1d1e-11e7-8b34-bde943b4793d.png" alt="Pagination demo 1" />

Installation

Install react-paginate with npm:

npm install react-paginate --save

Usage

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import ReactPaginate from 'react-paginate';

// Example items, to simulate fetching from another resources.
const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];

function Items({ currentItems }) {
  return (
    <>
      {currentItems &&
        currentItems.map((item) => (
          <div>
            <h3>Item #{item}</h3>
          </div>
        ))}
    </>
  );
}

function PaginatedItems({ itemsPerPage }) {
  // Here we use item offsets; we could also use page offsets
  // following the API or data you're working with.
  const [itemOffset, setItemOffset] = useState(0);

  // Simulate fetching items from another resources.
  // (This could be items from props; or items loaded in a local state
  // from an API endpoint with useEffect and useState)
  const endOffset = itemOffset + itemsPerPage;
  console.log(`Loading items from ${itemOffset} to ${endOffset}`);
  const currentItems = items.slice(itemOffset, endOffset);
  const pageCount = Math.ceil(items.length / itemsPerPage);

  // Invoke when user click to request another page.
  const handlePageClick = (event) => {
    const newOffset = (event.selected * itemsPerPage) % items.length;
    console.log(
      `User requested page number ${event.selected}, which is offset ${newOffset}`
    );
    setItemOffset(newOffset);
  };

  return (
    <>
      <Items currentItems={currentItems} />
      <ReactPaginate
        breakLabel="..."
        nextLabel="next >"
        onPageChange={handlePageClick}
        pageRangeDisplayed={5}
        pageCount={pageCount}
        previousLabel="< previous"
        renderOnZeroPageCount={null}
      />
    </>
  );
}

// Add a <div id="container"> to your HTML to see the component rendered.
ReactDOM.render(
  <PaginatedItems itemsPerPage={4} />,
  document.getElementById('container')
);

Test it on CodePen.

You can also read the code of demo/js/demo.js to quickly understand how to make react-paginate work with a list of objects.

Finally there is this CodePen demo, with features fetching sample code (using GitHub API) and two synchronized pagination widgets.

Props

NameTypeDescription
pageCountNumberRequired. The total number of pages.
pageRangeDisplayedNumberThe range of pages displayed.
marginPagesDisplayedNumberThe number of pages to display for margins.
previousLabelNodeLabel for the previous button.
nextLabelNodeLabel for the next button.
breakLabelNodeLabel for ellipsis.
breakAriaLabelsShapeAria labels of ellipsis elements (Default are { forward: 'Jump forward', backward: 'Jump backward' }).
breakClassNameStringThe classname on tag li of the ellipsis element.
breakLinkClassNameStringThe classname on tag a of the ellipsis element.
onPageChangeFunctionThe method to call when a page is changed. Exposes the current page object as an argument.
onClickFunctionA callback for any click on the component. Exposes information on the part clicked (for eg. isNext for next control), the next expected page nextSelectedPage & others. Can return false to prevent any page change or a number to override the page to jump to.
onPageActiveFunctionThe method to call when an active page is clicked. Exposes the active page object as an argument.
initialPageNumberThe initial page selected, in uncontrolled mode. Do not use with forcePage at the same time.
forcePageNumberTo override selected page with parent prop. Use this if you want to control the page from your app state.
disableInitialCallbackbooleanDisable onPageChange callback with initial page. Default: false
containerClassNameStringThe classname of the pagination container.
classNameStringSame as containerClassName. For use with styled-components & other CSS-in-JS.
pageClassNameStringThe classname on tag li of each page element.
pageLinkClassNameStringThe classname on tag a of each page element.
pageLabelBuilderFunctionFunction to set the text on page links. Defaults to (page) => page
activeClassNameStringThe classname for the active page. It is concatenated to base class pageClassName.
activeLinkClassNameStringThe classname on the active tag a. It is concatenated to base class pageLinkClassName.
previousClassNameStringThe classname on tag li of the previous button.
nextClassNameStringThe classname on tag li of the next button.
previousLinkClassNameStringThe classname on tag a of the previous button.
nextLinkClassNameStringThe classname on tag a of the next button.
disabledClassNameStringThe classname for disabled previous and next buttons.
disabledLinkClassNameStringThe classname on tag a for disabled previous and next buttons.
hrefBuilderFunctionThe method is called to generate the href attribute value on tag a of each page element.
hrefAllControlsBoolBy default the hrefBuilder add href only to active controls. Set this prop to true so href are generated on all controls (see).
extraAriaContextStringDEPRECATED: Extra context to add to the aria-label HTML attribute.
ariaLabelBuilderFunctionThe method is called to generate the aria-label attribute value on each page link
eventListenerStringThe event to listen onto before changing the selected page. Default is: onClick.
renderOnZeroPageCountFunctionA render function called when pageCount is zero. Let the Previous / Next buttons be displayed by default (undefined). Display nothing when null is provided.
prevRelStringThe rel property on the a tag for the prev page control. Default value prev. Set to null to disable.
nextRelStringThe rel propery on the a tag for the next page control. Default value next. Set to null to disable.
prevPageRelStringThe rel property on the a tag just before the selected page. Default value prev. Set to null to disable.
selectedPageRelStringThe rel propery on the a tag for the selected page. Default value canonical. Set to null to disable.
nextPageRelStringThe rel property on the a tag just after the selected page. Default value next. Set to null to disable.

Demo

To run the demo locally, clone the repository and move into it:

git clone git@github.com:AdeleD/react-paginate.git
cd react-paginate

Install dependencies:

npm install

Prepare the demo:

npm run demo

Run the server:

npm run serve

Open your browser and go to http://localhost:3000/

<img src="https://cloud.githubusercontent.com/assets/2084833/24840241/7c95b7b2-1d1e-11e7-97e3-83b9c7a1f832.gif" alt="Pagination demo" />

Contribute

See CONTRIBUTE.md