Responsive Bootstrap 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
Ready to go with Bootstrap 4.x styles, just include the component in your Bootstrap 4.x project

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

Bootstrap 4.x Styles

react-responsive-pagination is styled for Bootstrap 4.x. If you don't already have Bootstrap styles see the Bootstrap 4.x Download Guide

Don't want to use Bootstrap? No problem, see the Custom Styled Pagination guide

Quick Start - Functional Components / Hooks

import React, { useState } from 'react';
import Pagination from 'react-responsive-pagination';
// Bootstrap 4.x styles included somewhere in the project
import 'bootstrap/dist/css/bootstrap.css';

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)}
    />
  );
}

Quick Start - Class Components

import React from 'react';
import Pagination from 'react-responsive-pagination';
// Bootstrap 4.x styles included somewhere in the project
import 'bootstrap/dist/css/bootstrap.css';

export default class MyApp extends React.Component {
  state = {
    totalPages: 120,
    currentPage: 1,
  };
Show all - 16 more lines

  handlePageChange(page) {
    this.setState({ currentPage: page });
    // ... do something with `page`
  }

  render() {
    return (
      <Pagination
        total={this.state.totalPages}
        current={this.state.currentPage}
        onPageChange={page => this.handlePageChange(page)}
      />
    );
  }
}
16 more lines

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" />

Example - Single arrow labels

<Pagination ... previousLabel="‹" nextLabel="›" />

Alignment / Justify

Change how the pagination is positioned by setting the extraClassName prop to one of the Bootstrap justify content options. Here are some suitable values:

Value	Alignment
`justify-content-start`	Left
`justify-content-end`	Right
`justify-content-center`	Center (default)

Example - align pagination left:

<Pagination ... extraClassName="justify-content-start" />

Props Reference

Prop	Description
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 `»`
extraClassName (optional) Default: `justify-content-center`	`string` Extra classes to be added to the top level `<ul\>` element, defaults to `justify-content-center` Use this prop to override the default justify value - for example to align elements to the start of the page use: `justify-content-start`

Further Details

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