A ReactJS component that creates a pagination

Last update: Aug 3, 2022

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:

Pagination demo 2

or

Pagination demo 1

Installation

Install react-paginate with npm:

$ npm install react-paginate --save

For CommonJS users:

import ReactPaginate from 'react-paginate';

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

Demo

Clone the repository and move into:

$ git clone [email protected]:AdeleD/react-paginate.git
$ cd react-paginate

Install dependencies:

$ make install

Prepare the demo:

$ make demo

Run the server:

$ make serve

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

Pagination demo

Props

Name Type Description
pageCount Number Required. The total number of pages.
pageRangeDisplayed Number Required. The range of pages displayed.
marginPagesDisplayed Number Required. 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 clicked. Exposes the current page object as an argument.
initialPage Number The initial page selected.
forcePage Number To override selected page with parent prop.
disableInitialCallback boolean Disable onPageChange callback with initial page. Default: false
containerClassName String The classname of the pagination container.
pageClassName String The classname on tag li of each page element.
pageLinkClassName String The classname on tag a of each page element.
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.
hrefBuilder Function The method is called to generate the href attribute value on tag a of each page element.
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".

Contribute

  1. Submit an issue
  2. Fork the repository
  3. Create a dedicated branch (never ever work in master)
  4. The first time, run command: webpack into the directory
  5. Run npm start
  6. Fix bugs or implement features
  7. Always write tests

Run tests:

$ make test

GitHub

https://github.com/AdeleD/react-paginate
Comments
  • 1. forcePage doesn't work

    If I render this

    class MyPagination extends Component {
      constructor() {
        this.state = { currentPage: 0 }
      }
    
      render() {
        return (
          <ReactPaginate
            pageCount={10}
            pageRangeDisplayed={3}
            marginPageDisplayed={3}
            forcePage={this.state.currentPage}
          />
        )
      }
    }
    

    Then click on pages, the selected page changes. I would expect it to stay on page 0

    I'd like to perform async actions after page click before having the change reflected. Is this possible given the current configuration options?

    Reviewed by JakeElder at 2017-01-29 18:15
  • 2. clickCallback gets called without a click

    Hello,

    I noticed that when react-paginate first gets displayed on a page, it automatically calls the clickCallback handler.

    I don't want it to do this. I just want the clickCallback handler called when a page number is clicked.

    Am I doing something wrong?

    Reviewed by hackingbeauty at 2016-07-01 22:37
  • 3. Compatibility with styled-components

    It would be nice to have direct compatibility with styled-component by accepting the standard className prop as alternative to the containerClassName prop. Otherwise styling with styled-components is only possible by wrapping the component in an extra wrapper component.

    const StyledReactPaginate = styled(ReactPaginate)`
      a {
        cursor: pointer;
      }
      .selected {
        background: lime;
      }
    `;
    
    Reviewed by tpinne at 2020-09-21 14:56
  • 4. Previous button stays disabled, next always goes to the second page

    I get this strange behavior with this is the code: I cannot click on the previous button because it stays disabled, even when going to page 2 or 3 Next always goes back to the second page Clicking on the first page doesn't do anything (it remains to have the class "active" even when i'm on another page)

    Similar behavior was found here, but not resolved: https://github.com/AdeleD/react-paginate/issues/100

            <ReactPaginate pageCount={3}
                           marginPagesDisplayed={2}
                           pageRangeDisplayed={2}
    
                           previousLabel={"previous"}
                           nextLabel={"next"}
                           breakLabel={<a href="">...</a>}
                           breakClassName={"break-me"}
                           disableInitialCallback={true}
                          
                           onPageChange={this.handlePageClick.bind(this)}
                           containerClassName={"pagination"}
                           subContainerClassName={"pages pagination"}
                           activeClassName={"active"} />   
    
    Reviewed by jonas-db at 2017-02-17 14:34
  • 5. Setting new selected value post-mount

    I'm attempting to manipulate the selected page number of PaginationBoxView without a user click (such as on pushState) after the component has been mounted. What I found was that the selected state wasn't updating because that state is only set before the initial mount.

    I opened a PR with a simple solution using componentWillReceiveProps, let me know if this is appropriate: #61

    Reviewed by k5o at 2016-03-28 21:40
  • 6. Documentation please

    I'm evaluating this component, but even looking at the example, it is not clear how the api works.

    Is there the equivalent of current, total, and max parameters?

    Reviewed by kmalakoff at 2015-09-30 22:33
  • 7. Why there is no href="#" attribute by default?

    Is there a way to add href="#" to all items? I've tried with:

    hrefBuilder={() => {
                return '#';
    }}
    

    But this add only to non active elements the href tag. The reason is why i want href on Items, that if you double click, that the numbers don't get marked.

    Reviewed by endze1t at 2018-10-29 00:05
  • 8. Need any help with the repo?

    Currently using this component for a personal project and being quite helpful with it, noticed that you got a few open issues and PR requests, wondering if you need any help.

    Reviewed by castrolem at 2018-02-01 10:52
  • 9. timewaste

    more timewasting software that doesnt run a basic demo

    ERROR in ./react_components/index.js Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in /private/tmp/react-paginate/react_components @ ./react_components/index.js 1:288-319

    ERROR in ./react_components/PaginationBoxView.js Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in /private/tmp/react-paginate/react_components @ ./react_components/PaginationBoxView.js 1:288-319

    ERROR in ./react_components/PageView.js Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in /private/tmp/react-paginate/react_components @ ./react_components/PageView.js 1:288-319

    ERROR in ./react_components/BreakView.js Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in /private/tmp/react-paginate/react_components @ ./react_components/BreakView.js 1:288-319

    Reviewed by codyc4321 at 2017-09-21 20:19
  • 10. Error with global

    Hi! When i use v6.4.0 or v6.5.0, i have an error in console Screenshot 2020-09-17 at 14 00 24 Screenshot 2020-09-17 at 14 00 38

    Look at react-paginate/dist/react-paginate.js, you have global variable there. Browser doesn't recognize global variable. I think there is a problem with your webpack. .

    Reviewed by AndreyKuleb at 2020-09-17 11:04
  • 11. Change page programmatically

    I need to change page programmatically without clicking on certain page label: image Here user will input a page number, press enter and go to it. But if I enter a page number it is not stored in component's variable 'selected', so if I click on next arrow component goes to 2nd page not 6th (see image). That happens because 'clickCallback' is invoked directly in my component. Is there a way to update currently selected page from outside code?

    Reviewed by phaeton2040 at 2016-06-16 11:54
  • 12. Next Js Hydration failed

    Screenshot 2022-07-29 at 4 06 21 PM Screenshot 2022-07-29 at 4 06 33 PM

    I am getting these hydration issue in latest react 18.1.0 and 12.1.6 version, can you please look into it and fix it. I even updated my react-paginate to latest version "react-paginate": "^8.1.3"

    Reviewed by usama86 at 2022-07-29 11:16
  • 13. Sample code in docs causes multiple re-renders

    The code in usage section of the docs causes multiple renders owing to the logic residing in the useEffect hook which has state updates which triggers the re-renders.

     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]);
    

    After the React 18 update, this has become even more noticeable in the development mode, as React runs every useEffect twice. As per the beta React docs suggestion, we could simply take the logic out of the useEffect and replace the additional states with regular variables, since we already have one useState itemOffset which would cause a re-render and the new values could be calculated every time without the need for an additional render. This, would result in both performance and memory improvements. I have created a codesandbox of how the changed sample could look and work.

    const [itemOffset, setItemOffset] = useState(0);
    // Fetch items from another resources.
    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);
    

    An argument could be made that people should spot this and not follow the docs blindly, but even I missed it about six months ago. This change in the docs would help beginners by enforcing good patterns and keeping performance high. Please allow me to take this issue up, and I will submit a PR with updated README file.

    Reviewed by sakshambhatt at 2022-07-28 15:53
  • 14. Bump terser from 5.9.0 to 5.14.2

    Bumps terser from 5.9.0 to 5.14.2.

    Changelog

    Sourced from terser's changelog.

    v5.14.2

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    • Source maps improvements (#1211)
    • Performance improvements in long property access evaluation (#1213)

    v5.14.1

    • keep_numbers option added to TypeScript defs (#1208)
    • Fixed parsing of nested template strings (#1204)

    v5.14.0

    • Switched to @​jridgewell/source-map for sourcemap generation (#1190, #1181)
    • Fixed source maps with non-terminated segments (#1106)
    • Enabled typescript types to be imported from the package (#1194)
    • Extra DOM props have been added (#1191)
    • Delete the AST while generating code, as a means to save RAM

    v5.13.1

    • Removed self-assignments (varname=varname) (closes #1081)
    • Separated inlining code (for inlining things into references, or removing IIFEs)
    • Allow multiple identifiers with the same name in var destructuring (eg var { a, a } = x) (#1176)

    v5.13.0

    • All calls to eval() were removed (#1171, #1184)
    • source-map was updated to 0.8.0-beta.0 (#1164)
    • NavigatorUAData was added to domprops to avoid property mangling (#1166)

    v5.12.1

    • Fixed an issue with function definitions inside blocks (#1155)
    • Fixed parens of new in some situations (closes #1159)

    v5.12.0

    • TERSER_DEBUG_DIR environment variable
    • @​copyright comments are now preserved with the comments="some" option (#1153)

    v5.11.0

    • Unicode code point escapes (\u{abcde}) are not emitted inside RegExp literals anymore (#1147)
    • acorn is now a regular dependency

    v5.10.0

    • Massive optimization to max_line_len (#1109)
    • Basic support for import assertions
    • Marked ES2022 Object.hasOwn as a pure function
    • Fix delete optional?.property
    • New CI/CD pipeline with github actions (#1057)

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-07-20 01:23
  • 15. can you add first and last page feature?

    Hi, thanks for writing this amazing package. really appreciate. Can you add the first and last page feature to traverse the very first and very last page. thanks.

    Reviewed by muneebejazz at 2022-06-29 19:54
  • 16. Help - Pagination buttons not working as intended

    Hello, I am trying to include pagination for my application using react-paginate. I observe the following issues:

    1. Page no 1 is always set with blue background
    2. Page no 1 is not clickable
    3. Previous button is not clickable
    4. Clicking on ... dots does not expand the page numbers and does not display the next page
    5. Clicking on Next button always loads only the second page.

    Please can you help me?

    Reviewed by vijaya-lakshmi-venkatraman at 2022-06-26 07:56
React.js pagination component based on ultimate-pagination
React.js pagination component based on ultimate-pagination

react-ultimate-pagination React.js pagination component based on ultimate-pagination. It's implemented as a higher-order component that allows easy in

Jun 26, 2022
A ReactJS dumb component to render a pagination
A ReactJS dumb component to render a pagination

react-js-pagination A ReactJS dumb component to render a pagination. The component comes with no built-in styles. HTML layout compatible with Bootstra

Jul 29, 2022
Simple, lightweight, flexible pagination ReactJS component ⏮⏪1️⃣2️⃣3️⃣⏩⏭
Simple, lightweight, flexible pagination ReactJS component ⏮⏪1️⃣2️⃣3️⃣⏩⏭

React Paginating Motivation During development, we were facing problems supporting server-rendering of our web app & SEO (require pagination links). T

Jun 24, 2022
Laravel Pagination with ReactJS (customizable)

Laravel Pagination with ReactJS (customizable) react-laravel-paginex will provide you ability to easily create pagination from Laravel Pagination obje

Jul 8, 2022
⚛️ React render props component & custom hook for pagination.

Paginated React render props & custom hook for pagination. Features Headless component - There are no restrictions on the ui expression. Style free -

May 22, 2022
A React component to render your pagination navigation

A React component to render your pagination navigation

Dec 12, 2021
HTML CSS & React - Pagination component
HTML CSS & React - Pagination component

React component to fetch GitHub followers and showcase certain amount at each page with pagination

Jul 15, 2022
react pagination component, simple use
react pagination component, simple use

React-pagination Preview: https://killsanghyuck.github.io/react-pagination/ Install npm install react-pagination-component Configuration totalPage :

Mar 18, 2022
React Pagination Component.

React Pagination Component.

Jul 12, 2022
React Pagination Utils

React Pagination Utils

May 26, 2022
React components for sorting, filtering and pagination of data.

react-data-components DataTable: Live demo and source SelectableTable: Live demo and source Getting started npm install react-data-components --save T

Jul 28, 2022
Simple pagination for React (MIT)

react-pagify - Simple pagination for React react-pagify provides a simple API for building your own custom paginator. If you want to learn more about

Jun 5, 2022
React - Pagination Example with logic like Google

react-pagination-example React - Pagination Example with Logic like Google To see a demo and further details go to http://jasonwatmore.com/post/2017/0

Jun 7, 2022
simple library for pagination in react

IMPORTANT NOTE This repository is DEPRECATED. Please use react-pagination-js instead which has more added feature and is tested well. React-pagination

Jan 24, 2020
React Pagination using Hooks example

React Pagination using Hooks example Set port .env PORT=8081 Project setup In the project directory, you can run: npm install # or yarn install or C

Apr 20, 2022
Generate a sequence of numbers for use in a pagination system, the clever way.
Generate a sequence of numbers for use in a pagination system, the clever way.

JavaScript Pagination Sequence Generator Generate a sequence of numbers for use in a Pagination Component, the clever way. Installation npm i @bramus/

Jul 10, 2022
React Pagination Bar
React Pagination Bar

React Pagination Bar Lightweight component for pagination of application pages on react Features Customizing class names without using style overrides

Aug 1, 2022
React Paginations component
React Paginations component

react-paginations React Paginations Demo: https://trendmicro-frontend.github.io/react-paginations Installation Install the latest version of react and

May 14, 2019
Sweet Pagination - A ReactJS component to render a pagination
Sweet Pagination - A ReactJS component to render a pagination

Sweet Pagination - A ReactJS component to render a pagination

Jul 25, 2022
React.js pagination component based on ultimate-pagination
React.js pagination component based on ultimate-pagination

react-ultimate-pagination React.js pagination component based on ultimate-pagination. It's implemented as a higher-order component that allows easy in

Jun 26, 2022