react-responsive-pagination

Styled Responsive Pagination

react-responsive-pagination is an easy to use responsive pagination component:

  • Truly responsive - always outputs the right number of pagination elements for the width available, no guesswork needed
  • Easy to style, just include the necessary css in your project (see examples below)

Installation

Install react-responsive-pagination from npm:

npm install react-responsive-pagination

Compatibility

  • React 16.8 or later
  • Modern browsers only - not suitable for IE 11

Quick Start - Functional Components / Hooks

(for a class component example see here)

MyApp.js
import React, { useState } from 'react';
import Pagination from 'react-responsive-pagination';
import './pagination.css'; // see pagination.css examples below


export default function MyApp() {
  const totalPages = 120;
  const [currentPage, setCurrentPage] = useState(1);


  function handlePageChange(page) {
    setCurrentPage(page);
    // ... do something with `page`
  }


  return (
    <Pagination
      total={totalPages}
      current={currentPage}
      onPageChange={page => handlePageChange(page)}
    />
  );
}

(see below for pagination.css examples, for more information on Props, see Props Reference)

Custom Styling

To create custom styles for react-responsive-pagination simply include some custom css - the four examples below should provide a good starting point. For a full list of suggested css selectors to target, see Selector Reference

Using Bootstrap 4.x? No problem, see the Bootstrap Pagination guide.

Example 1 - Basic Pagination

For a full list of suggested css selectors to target, see Selector Reference

Example 2 - Classic Pagination

For a full list of suggested css selectors to target, see Selector Reference

Example 3 - Advanced Pagination

For a full list of suggested css selectors to target, see Selector Reference

Example 4 - Standalone Bootstrap 4 Styles

Pagination css:

For a full list of suggested css selectors to target, see the next section

Selector Reference

SelectorNotes
.paginationPagination container (<ul> tag)
The recommended style is a horizontal flexbox (see examples below)
.page-itemItem containers (<li> tags)
Styles may not be needed for this selector, see selector below
.page-item .page-linkItem elements (<a> or <span> tags)
Includes links and static labels. Style as a block element with appropriate font, margin and border (see examples below)
.page-item a.page-linkClickable item elements (<a> tags)
Page links or the next/previous buttons (if they are clickable)
.page-item.active .page-linkActive page link (<a> tags)
CSS should highlight this element (see examples below)
.page-item.disabled .page-linkDisabled items (<span> tags)
Includes '...' or disabled nav buttons. CSS should show grey out these elements (see examples below)
.sr-onlyScreen reader only elements (<span> tags)
Required for accessibility. These elements not be visible, use CSS to visually hide these elements in a way screen readers can still read the text (see examples below)

Other Options

Previous and Next Labels

Change the default labels for the previous and next buttons by setting the previousLabel and nextLabel props:

Example - Text labels

<Pagination ... previousLabel="Previous" nextLabel="Next" />

Props Reference

PropDescription
current
(required)		number
The current active page. Indexed from 1
total
(required)		number
The total number of pages
onPageChange
(required)		(newPage: number) => void
A callback handler which is called when the user clicks a new page. The newPage parameter is indexed from 1
Note that the active page will not change unless the current prop is updated to reflect the new page (as in the example above)
maxWidth
(optional)
Default: undefined		number
The maximum width (in pixels) of the pagination component. Use this prop if you want to override the automatic sizing. Note the width may be exceeded if it's not possible a component to the specified width
previousLabel
(optional)
Default: «		string
The label for the previous button, default value is «
nextLabel
(optional)
Default: »		string
The label for the next button, default value is »

Further Details

For further details, see the react-responsive-pagination README