Simple pagination for React (MIT)

Last update: Jun 5, 2022

build status

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 React, read SurviveJS - Webpack and React.

Usage

react-pagify consists of four React components: Context, Segment, Button, and Ellipsis.

Pagination logic can be handled through a package, such as segmentize. react-pagify doesn't tie you to any particular solution by design, though.

Context and Segment

Context accepts two props: segments and onSelect. A segment in turn consists of an object (segmentName -> [pageNumbers]). Segment accepts matching segmentName through a prop and then constructs divs based on that. It also binds onSelect automatically so that when you click an individual page div, the page number will be passed to it as a first parameter. The second one matches with DOM event.

The example below binds centerPage through Context and Segment:

...

import Paginator from 'react-pagify';

...

<Paginator.Context className="pagify-pagination"
  segments={{
    centerPage: [4]
  }} onSelect={(page) => console.log(page)}>
  <Paginator.Segment field="centerPage" />
</Paginator.Context>

Both Context and Segment accept custom props so you can customize className and attach custom behavior as needed. In the latter case the custom props are applied per each page div generated.

Usage with segmentize

react-pagify doesn't deal with pagination logic itself. Instead, you can use another package, such as segmentize, to deal with it. The following example demonstrates basic integration:

...

import Paginator from 'react-pagify';
import segmentize from 'segmentize';

...

<Paginator.Context className="pagify-pagination"
  segments={segmentize({
    page: 1,
    pages: 4,
    sidePages: 2
  })} onSelect={(page) => console.log(page)}>
  <Paginator.Segment field="previousPages" />
  <Paginator.Segment field="centerPage" />
  <Paginator.Segment field="nextPages" />
</Paginator.Context>

The idea is the same as earlier. In this case we bind fields that segmentize outputs. Each of those fields contains an array of data. Refer to segmentize documentation for available options.

Button

Given it's handy to be able to implement previous and next buttons, there's a little shortcut just for that:

...

import Paginator from 'react-pagify';

...

<Paginator.Context className="pagify-pagination"
  segments={{
    centerPage: [currentPage]
  }} onSelect={(page) => console.log(page)}>
  <Paginator.Button page={currentPage - 1}>Previous</Paginator.Button>
  <Paginator.Button page={currentPage + 1}>Next</Paginator.Button>
</Paginator.Context>

Ellipsis

Given it can be handy to be able to display ellipsis between pages of a paginator, there's a small utility known as Ellipsis just for this. Internally it uses comparison logic based on given previousField and nextField props. If there is room between these fields (say the values are [1, 2] and [4, 5]), it will render ellipsis. You can customize the outlook by passing custom children to it. Consider the example below:

...

import Paginator from 'react-pagify';
import segmentize from 'segmentize';

...

<Paginator.Context className="pagify-pagination"
  segments={segmentize({
    page: 1,
    pages: 4,
    sidePages: 2
  })} onSelect={(page) => console.log(page)}>
  <Paginator.Segment field="beginPages" />

  <Paginator.Ellipsis className="ellipsis"
    previousField="beginPages" nextField="previousPages">
    ***
  </Paginator.Ellipsis>

  <Paginator.Segment field="previousPages" />
  <Paginator.Segment field="centerPage" />
  <Paginator.Segment field="nextPages" />

  <Paginator.Ellipsis previousField="nextPages" nextField="endPages" />

  <Paginator.Segment field="endPages" />
</Paginator.Context>

See demo/ for a full implementation of the ideas discussed.

Customize Tags

By default react-pagify uses divs for container, segments and ellipses, and spans for links. You can customize these tags and define custom props for htme:

...

import Paginator from 'react-pagify';

...

<Paginator.Context className="pagination"
  tags={{
    container: {
      tag: 'ul'
    },
    segment: {
      tag: 'li'
    },
    ellipsis: {
      tag: 'li'
    },
    link: {
      tag: 'a',
      props: {
        href: '#'
      }
    }
  }}
  segments={{
    centerPage: [4]
  }} onSelect={(page) => console.log(page)}>
  <Paginator.Segment field="centerPage" />
</Paginator.Context>

Related Projects

Contributors

  • rowbare - Allowed usage in Bootstrap by making className customizable.
  • Nadav Spiegelman - Added optional ellipsesClassName prop, showPrevNext prop.
  • Nick Zarczynski - Added configuration to always show prev/next buttons and allowed inactive buttons to be styled.
  • Nimi Wariboko Jr. - Added support for activeClassName.
  • Artem Sapegin - Added Added ellipsisButton and sidePages props. Allowed paginator tags to be customized (important for Bootstrap).
  • Frederic Heem - Moved lodash to peerDependencies.
  • Alexander Ryzhikov - Fixed global lodash import.

License

react-pagify is available under MIT. See LICENSE for more details.

GitHub

https://github.com/bebraw/react-pagify/
Comments
  • 1. Figure out a neater, more flexible interface

    The current Paginator feels too monolithic for my tastes. Given React's context API has stabilized, we might be able to do something way neater. Consider the following:

    <Paginator.Context
      segments={segmentize({page: 4, pages: 20, beginPages: 3, endPages: 3})}>
      <Paginator.PreviousPage className="previous" />
      <Paginator.Pages className="pages" />
      <Paginator.NextPage className="next" />
    </Paginator.Context>
    

    The idea is that when using the component, you actually wrap it into a paginator component of your own and deal with layout there.

    Any thoughts?

    CC @jacktrades, @rowbare, @nadavspi

    Reviewed by bebraw at 2015-10-13 17:18
  • 2. [WIP] Bootstrap support

    Trying to make it work with Bootstrap. Nothing is simple with Bootstrap :-(

    Here I’ve added ability to change tag names. But I also did some backward incompatible changes:

    • Segment sets props to outer element instead of inner (as Ellipsis already do).
    • Ellipsis renders with the same tag as Segment (was span and div).

    Looking forward for code review and API suggestions. Will add tests and docs when we agree on the API.

    Reviewed by sapegin at 2016-02-08 14:51
  • 3. Add configuration to always show prev/next buttons

    This adds 2 props to Paginator:

    • alwaysShowPrevNext (bool): Always show prev/next buttons even if the page is the first or last, respectively.
    • inactiveClassName (string): Class name to add to the prev/next buttons if they should be considered inactive (e.g., the prev button should be inactive if page is the first page).
    Reviewed by nickfrez at 2015-10-13 13:24
  • 4. move lodash to peerDependencies

    This PR avoids lodash.merge duplication and saves a few kB of code size. In the current situationm, below is the webpack-bundle-size-analyzer report, notice that lodash.merge is responsible for 91.4% of the total size:

    react-pagify: 96.12 KB (2.94%)
      lodash.merge: 87.88 KB (91.4%)
        lodash._stack: 18.16 KB (20.7%)
          lodash._mapcache: 12.38 KB (68.2%)
            <self>: 12.38 KB (100%)
          <self>: 5.77 KB (31.8%)
        lodash.keys: 11.26 KB (12.8%)
          <self>: 11.26 KB (100%)
        lodash.keysin: 11.17 KB (12.7%)
          <self>: 11.17 KB (100%)
        lodash.rest: 6.74 KB (7.67%)
          <self>: 6.74 KB (100%)
        lodash.isplainobject: 3.11 KB (3.54%)
          <self>: 3.11 KB (100%)
        lodash._root: 1.87 KB (2.13%)
          <self>: 1.87 KB (100%)
        lodash._basefor: 1.53 KB (1.74%)
          <self>: 1.53 KB (100%)
        lodash._arrayeach: 942 B (1.05%)
          <self>: 942 B (100%)
        <self>: 33.13 KB (37.7%)
      <self>: 8.24 KB (8.58%)
    
    Reviewed by FredericHeem at 2016-02-13 15:55
  • 5. Suggestion for increased usability

    Hi,

    ** Proposal to either provide a new example, modify this component, or set up a new component using this; I'm new to this, so don't really know! **

    I've been using this in my project. I'm a bit of a JS newbie, but I found the current structure a bit "heavy". In particular I find that I need a consistent paging style for multiple tables, but don't want the overhead of the react-pagify syntax around it every time. Now I may have missed an easier way, but the approach I've adopted is to wrap your component so that it can take a generic inner table. So for example I have an ActivitiesComponent to display a pagified table of activities, and my render is as simple as:

    render() {
        return ( <SwPager data={this.state.acts} innerTable={new ActivitiesTable() } /> );
    }
    

    where this.state.acts is my data obtained from the server. I feel this level of simplicity for adding new instances is a major ease-of-use factor.

    inner table is your table-rendering component of choice with a wrapper that supports a setData method, and SwPager is a generic wrapper around react-pagify, based very much on your sample here using segmentize; the difference being that the render function contains a {this.props.innerTable.render()} as its main content.

    It just seems that enabling a pagified table to be a one-line per instance rather than the 150-ish lines in your demo can only be a good thing?

    Regards

    David.

    Reviewed by OracPrime at 2016-04-15 21:37
  • 6. Going to last page

    Hello,

    Can i know how I can go to the last page of the pagination with some code ? In the version 0.9 it was quite easy but now that I updated I dont know how to do that.

    Reviewed by Ezekiah at 2016-04-04 15:37
  • 7. Add next & previous buttons

    • Toggled with showPrevNext prop
    • Class names controlled with prevClassName and nextClassName props
    • Next doesn't display on last page, Previous doesn't display on first page
    Reviewed by nadavspi at 2015-05-17 19:01
  • 8. Issue with 'lodash/merge'

    Hi, I've been looking to use react-pagify for one of our company's project. After installing module depencies appropriately, it appears that react-pagify cannot find the lodash/merge modules, thus blocking the project compilation. After looking quickly into your code, i found that commit might be responsible for it ( 3088cdee756f5213b7cd16524156ee1ece9c06bb ). Thanks for the time spent investigating this issue.

    Reviewed by Joramt at 2016-04-01 13:43
  • 9. Dist file contains 'const'

    The built dist file (for version 0.11) contains const declarations. I don't know where all browsers are in terms of compatibility but in Safari it produces:

    SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.
    

    https://github.com/bebraw/react-pagify/blob/263bff6703eca5794190bc96b2b68681a04b552a/dist/react-pagify.js#L225

    Reviewed by maplemike at 2016-01-29 15:48
  • 10. Ellipsis not showing up

    Ellipsis simply don't show up here's my code

    ...
     return (
        <div>
          <Pagify.Context
            tags={{
              segment: {
                tag: 'div'
              },
              link: {
                props: {
                  className: "btn btn-primary"
                }
              }
            }}
            className="pagination d-flex flex-row justify-content-end"
            segments={segmentize({
              page: pagination.page,
              pages,
              beginPages: 2,
              endPages: 2
            })} onSelect={onSelect}
          >
            <Pagify.Button page={pagination.page - 1}>Previous</Pagify.Button>
    
            <Pagify.Segment field="beginPages" />
    
            <Pagify.Ellipsis
              className="ellipsis"
              previousField="beginPages"
              nextField="previousPages"
            >
              {ellipsis}
            </Pagify.Ellipsis>
              
            <Pagify.Segment field="previousPages" />
            <Pagify.Segment field="centerPage" className="selected" />
            <Pagify.Segment field="nextPages"/>
          
            <Pagify.Ellipsis
              className="ellipsis"
              previousField="nextPages"
              nextField="endPages"
            >
              {ellipsis}
            </Pagify.Ellipsis>
          
            <Pagify.Segment field="endPages" />
          
            <Pagify.Button page={pagination.page + 1}>Next</Pagify.Button>
    
          </Pagify.Context>
        </div>
    );
    

    Where am I going wrong here? {ellipsis} has *** as the passed in props value

    Reviewed by Ashwin117 at 2018-01-26 01:22
  • 11. Migrate to React 15.5

    Reviewed by JMontagu at 2017-05-02 14:51
  • 12. Bump lodash from 4.17.19 to 4.17.21

    Bumps lodash from 4.17.19 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • ded9bc6 Bump to v4.17.20.
    • 63150ef Documentation fixes.
    • 00f0f62 test.js: Remove trailing comma.
    • 846e434 Temporarily use a custom fork of lodash-cli.
    • 5d046f3 Re-enable Travis tests on 4.17 branch.
    • aa816b3 Remove /npm-package.
    • See full diff in compare view
    Maintainer changes

    This version was pushed to npm by bnjmnt4n, a new releaser for lodash since your current version.


    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 2021-05-06 18:36
  • 13. Bump highlight.js from 9.12.0 to 10.4.1

    Bumps highlight.js from 9.12.0 to 10.4.1.

    Release notes

    Sourced from highlight.js's releases.

    10.4.1

    Security fixes:

    • (fix) Exponential backtracking fixes for: Josh Goebel
      • cpp
      • handlebars
      • gams
      • perl
      • jboss-cli
      • r
      • erlang-repl
      • powershell
      • routeros
    • (fix) Polynomial backtracking fixes for: Josh Goebel
      • asciidoc
      • reasonml
      • latex
      • kotlin
      • gcode
      • d
      • aspectj
      • moonscript
      • coffeescript/livescript
      • csharp
      • scilab
      • crystal
      • elixir
      • basic
      • ebnf
      • ruby
      • fortran/irpf90
      • livecodeserver
      • yaml
      • x86asm
      • dsconfig
      • markdown
      • ruleslanguage
      • xquery
      • sqf

    Very grateful to Michael Schmidt for all the help.

    10.4.0 - November 2020

    A largish release with many improvements and fixes from quite a few different contributors. Enjoy!

    Deprecations:

    ... (truncated)

    Changelog

    Sourced from highlight.js's changelog.

    Version 10.4.1 (tentative)

    Security

    • (fix) Exponential backtracking fixes for: Josh Goebel
      • cpp
      • handlebars
      • gams
      • perl
      • jboss-cli
      • r
      • erlang-repl
      • powershell
      • routeros
    • (fix) Polynomial backtracking fixes for: Josh Goebel
      • asciidoc
      • reasonml
      • latex
      • kotlin
      • gcode
      • d
      • aspectj
      • moonscript
      • coffeescript/livescript
      • csharp
      • scilab
      • crystal
      • elixir
      • basic
      • ebnf
      • ruby
      • fortran/irpf90
      • livecodeserver
      • yaml
      • x86asm
      • dsconfig
      • markdown
      • ruleslanguage
      • xquery
      • sqf

    Very grateful to Michael Schmidt for all the help.

    Version 10.4.0

    A largish release with many improvements and fixes from quite a few different contributors. Enjoy!

    ... (truncated)

    Commits
    • e96b915 bump 10.4.1
    • 065f65f chore(release) allow release script to handle production releases
    • 68509fc chore(docs) bump SECURITY mention to 9.18.5
    • aa0fb85 chore(docs) Version 9 has reached EOL.
    • fb0a626 enh(ci): Add tests for polynomial regex issues
    • fa46dd1 fix(reasonml) fix poly backtracking issue
    • d496052 fix(latex) fix poly backtracking issue
    • d9f1cdb fix(javascript/typescript) fix poly backtracking issue
    • fdec037 fix(asciidoc) fix poly backtracking issue
    • 02ca487 fix(kotlin) fix poly backtracking issue
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by joshgoebel, a new releaser for highlight.js since your current version.


    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 2020-12-04 16:54
  • 14. Tests are broken

    TypeError: Cannot read property 'ReactCurrentOwner' of undefined

    This might be something Jest and React 16 related. Likely a trivial fix if you know where to look.

    Reviewed by bebraw at 2017-11-08 08:54
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 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
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
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
⚛️ 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
React Pagination Utils

React Pagination Utils

May 26, 2022
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 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
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
React Pagination Component.

React Pagination Component.

Jul 12, 2022
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
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
A ReactJS component that creates a pagination
A ReactJS component that creates a pagination

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: or I

Aug 3, 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
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
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
a react usePagination() hook
a react usePagination() hook

Pagination in Javascript and React, with a custom usePagination() hook

Jul 20, 2022
Declarative routing for React

Welcome to React Router · React Router is a lightweight, fully-featured routing library for the React JavaScript library. React Router runs everywhere

Aug 4, 2022