react-responsive-pagination

Live Demo - try resizing your browser to see the component automatically adjust to the available width.

  • 8

NOTE: the striped region illustrates the component's container, it's not part of the component 🙂

Example: Functional Component (using hooks)

(examples below are using Bootstrap 4.x styles - for Bootstrap 5.x, see the Bootstrap Usage Guide)

import React, { useState } from 'react';
import ResponsivePagination from 'react-responsive-pagination';
import 'bootstrap/dist/css/bootstrap.css'; // this example uses Bootstrap 4.x styles
function MyApp() {
const totalPages = 120;
const [currentPage, setCurrentPage] = useState(1);
function handlePageChange(page) {
setCurrentPage(page);
// ... do something with `page`
}
return (
<ResponsivePagination
total={totalPages}
current={currentPage}
onPageChange={page => handlePageChange(page)}
/>
);
}

Example: Class Component

import React from 'react';
import ResponsivePagination from 'react-responsive-pagination';
import 'bootstrap/dist/css/bootstrap.css'; // this example uses Bootstrap 4.x styles
export default class MyApp extends React.Component {
state = {
totalPages: 120,
currentPage: 1,
};
handlePageChange(page) {
this.setState({ currentPage: page });
// ... do something with `page`
}
render() {
return (
<ResponsivePagination
total={this.state.totalPages}
current={this.state.currentPage}
onPageChange={page => this.handlePageChange(page)}
/>
);
}
}

Further Details

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