Live Demo - try resizing your browser to see the component automatically adjust to the available width.
NOTE: the striped region illustrates the component’s container, it’s not part of the component 🙂
Example
The example below is using the built in Classic theme
See Themes for more themes - alternatively, use Custom styles or use with Bootstrap
import React, { useState } from 'react';import ResponsivePagination from 'react-responsive-pagination';import 'react-responsive-pagination/themes/classic-light-dark.css';// ^ include theme css file, this is the classic theme (see themes documentation for other options)
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)} /> );}
Further Details
For further details, see the react-responsive-pagination documentation