react-paginate

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.

or

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

| Name | Type | Description | | ------------------------ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | pageCount | Number | Required. The total number of pages. | | pageRangeDisplayed | Number | The range of pages displayed. | | marginPagesDisplayed | Number | The number of pages to display for margins. | | previousLabel | Node | Label for the previous button. | | nextLabel | Node | Label for the next button. | | breakLabel | Node | Label for ellipsis. | | breakAriaLabels | Shape | Aria labels of ellipsis elements (Default are { forward: 'Jump forward', backward: 'Jump backward' }). | | breakClassName | String | The classname on tag li of the ellipsis element. | | breakLinkClassName | String | The classname on tag a of the ellipsis element. | | onPageChange | Function | The method to call when a page is changed. Exposes the current page object as an argument. | | onClick | Function | A 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. | | onPageActive | Function | The method to call when an active page is clicked. Exposes the active page object as an argument. | | initialPage | Number | The initial page selected, in uncontrolled mode. Do not use with forcePage at the same time. | | forcePage | Number | To override selected page with parent prop. Use this if you want to control the page from your app state. | | disableInitialCallback | boolean | Disable onPageChange callback with initial page. Default: false | | containerClassName | String | The classname of the pagination container. | | className | String | Same as containerClassName. For use with styled-components & other CSS-in-JS. | | pageClassName | String | The classname on tag li of each page element. | | pageLinkClassName | String | The classname on tag a of each page element. | | pageLabelBuilder | Function | Function to set the text on page links. Defaults to (page) => page | | activeClassName | String | The classname for the active page. It is concatenated to base class pageClassName. | | activeLinkClassName | String | The classname on the active tag a. It is concatenated to base class pageLinkClassName. | | previousClassName | String | The classname on tag li of the previous button. | | nextClassName | String | The classname on tag li of the next button. | | previousLinkClassName | String | The classname on tag a of the previous button. | | nextLinkClassName | String | The classname on tag a of the next button. | | disabledClassName | String | The classname for disabled previous and next buttons. | | disabledLinkClassName | String | The classname on tag a for disabled previous and next buttons. | | hrefBuilder | Function | The method is called to generate the href attribute value on tag a of each page element. | | hrefAllControls | Bool | By default the hrefBuilder add href only to active controls. Set this prop to true so href are generated on all controls (see). | | extraAriaContext | String | DEPRECATED: Extra context to add to the aria-label HTML attribute. | | ariaLabelBuilder | Function | The method is called to generate the aria-label attribute value on each page link | | eventListener | String | The event to listen onto before changing the selected page. Default is: onClick. | | renderOnZeroPageCount | Function | A render function called when pageCount is zero. Let the Previous / Next buttons be displayed by default (undefined). Display nothing when null is provided. | | prevRel | String | The rel property on the a tag for the prev page control. Default value prev. Set to null to disable. | | nextRel | String | The rel propery on the a tag for the next page control. Default value next. Set to null to disable. | | prevPageRel | String | The rel property on the a tag just before the selected page. Default value prev. Set to null to disable. | | selectedPageRel | String | The rel propery on the a tag for the selected page. Default value canonical. Set to null to disable. | | nextPageRel | String | The 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/

Contribute

See CONTRIBUTE.md