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-pagination
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 projectimport '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 projectimport '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)} /> ); }}
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
A selection of props which may be helpful when using Bootstrap styles - for the full list of props see Props Reference
Prop | Description |
---|---|
current number (required) | The current active page. Indexed from 1 |
total number (required) | The total number of pages |
onPageChange (newPage: number) => void (required) | A callback handler which is called when the user clicks a new page. The Note that the active page will not change unless the |
maxWidth number (optional) | 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 string (optional) | The label for the previous button, defaults to |
nextLabel string (optional) | The label for the next button, defaults to |
extraClassName string (optional) | Useful when using Bootstrap styles, extra classNames to be added to the top level <ul> container. Use this prop to override the default justify value - for example to align elements to the start of the page use: Defaults to |