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 🙂

Code Example

The example below uses 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)}
    />
  );
}