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.

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 }) {
  // We start with an empty list of items.
  const [currentItems, setCurrentItems] = useState(null);
  const [pageCount, setPageCount] = useState(0);
  // 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);

  useEffect(() => {
    // Fetch items from another resources.
    const endOffset = itemOffset + itemsPerPage;
    console.log(`Loading items from ${itemOffset} to ${endOffset}`);
    setCurrentItems(items.slice(itemOffset, endOffset));
    setPageCount(Math.ceil(items.length / itemsPerPage));
  }, [itemOffset, 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 componend 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.
`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.
`activeLinkClassName`	`String`	The classname on the active tag `a`.
`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