React.js pagination component based on ultimate-pagination

Last update: Jun 26, 2022

ultimate-pagination logo

react-ultimate-pagination

NPM version Downloads

React.js pagination component based on ultimate-pagination. It's implemented as a higher-order component that allows easy integration of react-ultimate-pagination with different CSS frameworks or approaches.

To use react-ultimate-pagination in your project, you can write your theme or use one of already existing.

Themes

Here is a list of themed versions of react-ultimate-pagination component. To use them you don't need explicitly install this module to your project; it will be installed automatically as a dependency of themed component.

Installation

You need to install this module only if you want to write your project or CSS framework specific theme.

You can install this module via npm:

npm install react-ultimate-pagination --save

Usage

This module provides createUltimatePagination(options) method that is a React.js high-order component. It means that you need to call this component with specific options to create a React.js component.

The options object contains following properties:

  • itemTypeToComponent: object - an object that is used as a map from the item type to the React.js component that will be used to render this item
  • WrapperComponent: React.Component - a React.js component that will be used as a wrapper for pagination items (optional, default: React.DOM.div)

The itemTypeToComponent object should contains React.js component for each item type:

  • PAGE - a link to a page
  • ELLIPSIS - an item that represents groups of pages that currently are not visible in paginator (can be used to navigate to the page in the group that is the nearest to the current page)
  • FIRST_PAGE_LINK - a link to the first page
  • PREVIOUS_PAGE_LINK - a link to the previous page
  • NEXT_PAGE_LINK - a link to the next page
  • LAST_PAGE_LINK - a link to the last page

Each of this component receives as a props following data:

  • value: number - number of pages that user should navigate to when item is activated (for items with type PAGE it also can be used as a label in UI)
  • isActive: boolean - show if currentPage if the same as value of an item (can be used to highlight a current page or disable first, previous, next or last page links when user is already on first/last page)
  • isDisabled: boolean - show if button should be disabled
  • onClick(): function - should be called when user interacted with a component and the current page should be changed to the page represented by item (no arguments should be used, can be used for all item types)

Here is an example of basic usage:

var React = require('react');
var ReactUltimatePagination = require('react-ultimate-pagination');

function Page(props) {
  return (
    <button
      style={props.isActive ? {fontWeight: 'bold'} : null}
      onClick={props.onClick}
      disabled={props.disabled}
    >{props.value}</button>
  );
}

function Ellipsis(props) {
  return <button onClick={props.onClick} disabled={props.disabled}>...</button>
}

function FirstPageLink(props) {
  return <button onClick={props.onClick} disabled={props.disabled}>First</button>
}

function PreviousPageLink(props) {
  return <button onClick={props.onClick} disabled={props.disabled}>Previous</button>
}

function NextPageLink(props) {
  return <button onClick={props.onClick} disabled={props.disabled}>Next</button>
}

function LastPageLink(props) {
  return <button onClick={props.onClick} disabled={props.disabled}>Last</button>
}

function Wrapper(props) {
  return <div className="pagination">{props.children}</div>
}

var itemTypeToComponent = {
  'PAGE': Page,
  'ELLIPSIS': Ellipsis,
  'FIRST_PAGE_LINK': FirstPageLink,
  'PREVIOUS_PAGE_LINK': PreviousPageLink,
  'NEXT_PAGE_LINK': NextPageLink,
  'LAST_PAGE_LINK': LastPageLink
};

var UltimatePagination = ReactUltimatePagination.createUltimatePagination({
  itemTypeToComponent: itemTypeToComponent,
  WrapperComponent: Wrapper
});

Created UltimatePagination component has the following interface:

  • currentPage: number - current page number
  • totalPages: number - total number of pages
  • boundaryPagesRange: number, optional, default: 1 - number of always visible pages at the beginning and end
  • siblingPagesRange: number, optional, default: 1 - number of always visible pages before and after the current one
  • hideEllipsis: bool, optional, default: false - boolean flag to hide ellipsis
  • hidePreviousAndNextPageLinks: bool, optional, default: false - boolean flag to hide previous and next page links
  • hideFirstAndLastPageLinks: bool, optional, default: false - boolean flag to hide first and last page links
  • onChange: function - callback that will be called with new page when it should be changed by user interaction (optional)
  • disabled: bool, optional, default: false - boolean flag to disable all buttons in pagination

GitHub

https://github.com/ultimate-pagination/react-ultimate-pagination/
Comments
  • 1. Help: Is there a simple way to disable all buttons?

    Can you please help me figure this out? I have the ultimate-pagination hooked up to ajax requests. Each button (page number, first, last, next, prev) triggers one. Since my backend can be rather slow I have easily many concurrent requests resulting in flashing ui. Canceling fetch() in javascript is complicated right now so I came up with an idea to disable the pagination while a request is pending. The only solution I can think of is creating another Pagination component with createUltimatePagination and itemTypeToComponent set all to disabled buttons, but I don't believe it is a good approach.

    Reviewed by FilipChalupa at 2018-02-18 22:12
  • 2. Add a new callPreventDefault property

    This is so single page applications may stop UltimatePaginationComponent from changing the url.

    i.e. so the webpage can do that itself using the History apis

    Reviewed by delfick at 2017-02-14 07:20
  • 3. Supplying the rest of the props to the wrapper

    This PR allows the parent to pass down whatever props it cares for. That will allow the wrapping component to determine how it wants to render its children, maybe add styles, etc.

    Reviewed by jshthornton at 2017-01-30 11:26
  • 4. have multiple copies of React loaded

    Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).
        at invariant (invariant.js:44)
        at Object.addComponentAsRefTo (ReactOwner.js:68)
        at attachRef (ReactRef.js:23)
        at Object.webpackJsonp.../node_modules/react-dom/lib/ReactRef.js.ReactRef.attachRefs (ReactRef.js:42)
        at ReactCompositeComponentWrapper.attachRefs (ReactReconciler.js:23)
        at CallbackQueue.notifyAll (CallbackQueue.js:76)
        at ReactReconcileTransaction.close (ReactReconcileTransaction.js:80)
        at ReactReconcileTransaction.closeAll (Transaction.js:206)
        at ReactReconcileTransaction.perform (Transaction.js:153)
        at batchedMountComponentIntoNode (ReactMount.js:126)
    

    Should be changed in package.json

      "dependencies": {
        "ultimate-pagination": "1.0.0"
      }
    
      "peerDependencies": {
        "react": "^0.14.0 || ^15.0.0",
        "react-dom": "^0.14.0 || ^15.0.0"
      }
    
    Reviewed by lanjingling0510 at 2017-03-29 09:59
  • 5. Ability to change how many page links are displayed

    Currently it seems like there's no way to change the amount of pages that are displayed, it's always:

    First page, Previous Page, Page 1, ... , Page 5, Page 6 (Current), Page 7, ..., Page 12345, Next Page, Last Page

    This could just be a lack of documentation, but this is a feature I would like to have. 👍

    Reviewed by Inumedia at 2016-11-27 18:58
  • 6. Error after upgrading to React 15.4.1

    Warning: React.createElement: type should not be null, undefined, boolean, or number. 
    It should be a string (for DOM elements) or a ReactClass (for composite components).
    Check the render method of `UltimatePaginationComponent`.
    
    Reviewed by vivekmarakana at 2016-11-28 12:18
  • 7. Allow custom properties

    Hi First of all - thank you for creating one of coolest pagination components for React.

    As one of requirement in our project I have to display not page numbers but ranges (of content it display). I was able to do it with some function

    const pageLabel = page => {
      const firstPage = ((page - 1) * 20) + 1
      const lastPage = firstPage + 19
      return `${firstPage}-${lastPage}`
    }
    

    and it display nicely ranges 1-20 | 21-40 | 41-60 ...

    However UI team wants to display not full range but actual number of content items - so something like: 1-20 | 21-40 | 41-43

    I tried to pass down own property (named total) but I saw it's omitted.

    Is there any plans, possibility to pass own (custom) props down? I see code destructs only some properties and nothing more is being added https://github.com/ultimate-pagination/react-ultimate-pagination/blob/master/src/react-ultimate-pagination.js#L23

    Thanks.

    Reviewed by dominikbulaj at 2018-01-23 10:54
  • 8. Update React peer dependencies to support React 16

    Why?

    When using react-ultimate-pagination with React 16, a peer dependency warning shows up from NPM/Yarn.

    What changed?

    • Upped the peer dependencies for react and react-dom to also allow version 16

    Fixes #9

    Reviewed by greg5green at 2017-12-15 16:57
  • 9. Update react peerDependencies

    This project works just fine with React 17. However, new users using the latest node and npm will encounter an error that prohibits installation of this project due to peerDependencies. Users must do npm install --force or npm install --use-legacy-deps in order to force the installation. This is not ideal. This update resolves the issue.

    Reviewed by mrbinky3000 at 2022-01-04 21:54
  • 10. Ellipsis is not working for me

    I have used basic steps to implement other buttons are working fine but Ellipsis not showing on screen.

    Please let me know is there any dependency issue ?

    Reviewed by santoshshinde2012 at 2017-11-08 11:20
  • 11. First and Second ellipsis

    Hi!

    Thanks for good and simple library! Any thoughts how can I get access to first and second ellipsis? I need to use different images there.

    Many thanks in advance

    Reviewed by sergeycw at 2019-11-05 14:53
  • 12. Expose event to onChange callback

    Would you accept a pr that exposes the click event to the callback for onChange?

    https://github.com/ultimate-pagination/react-ultimate-pagination/blob/master/src/react-ultimate-pagination.js#L9

    It makes it easier for the consumer to handle state and gives more flexibility. Something like onChange(value, event), so as to not make a breaking change.

    Reviewed by jbadan at 2019-06-14 22:23
  • 13. bootstrap 3 themes

    How to install bootstrap 3 themes? i use webpack, i have installed react-bootstrap 3.2.1 and this . seems pagination working, but no themes, how to add bootstrap themes? seems like in this https://github.com/ultimate-pagination/react-ultimate-pagination-bootstrap-3 repo no styles

    Reviewed by IzaGz at 2018-07-15 21:31
  • 14. Ability to disable next/last when we are on the last page

    I'd like to be able to disable the 'next page' link and 'last page' link when the user gets to the last page.

    Currently I can do this with first and previous by checking that the value is 1, but there is no way to check if it's the last page. I would suggest passing the totalPages in with the props, or updating the isDisabled prop for that component.

    Reviewed by PaulInglis at 2018-03-07 09:55
  • 15. Allow currentPage to be greater than totalPages

    Now users can type currentPage in URL while totalPages is a constant. What's the best way to handle it in our application?

    I was expecting that this plugin will handle it for me... We can always render pagination like when currentPage is 1 but pass isActive=false to each component.

    Reviewed by ezhlobo at 2018-02-13 21:12
⚛️ 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
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
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
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
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
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
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 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
a react usePagination() hook
a react usePagination() hook

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

Jul 20, 2022