Bootstrap Usage

react-responsive-pagination is an easy to use React responsive pagination component which 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

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

Installation

Install react-responsive-pagination from npm:

npm install react-responsive-paginationCopy

To install Bootstrap styles, see the Bootstrap 4.x Download 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)}
    />
  );
}Copy

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 linesCopy

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

Example - Single arrow labels

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

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:

Example - align pagination left:

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

Props Reference

A selection of props which may be helpful when using Bootstrap styles - for the full list of props see Props Reference