react-responsive-pagination

React Responsive Pagination

An accessible responsive React pagination component which intelligently renders to the available width - for React 19, 18, 17 & 16

✅ Fully accessible with aria tags for screen readers
✅ Ready styled themes (or bring your own css)
✅ Bootstrap 4 & 5 support built-in
✅ Built for tree-shaking = minimum impact on the bundle

⚡️ LIVE DEMO - try it out for yourself! ⚡️

⭐️ What's new: Dark Mode & React 19 support

📕 Visit https://react-responsive-pagination.elantha.com to get started 🚀

⏳ Quick Start

npm install react-responsive-pagination

import React, { useState } from 'react';
import ResponsivePagination from 'react-responsive-pagination';
import 'react-responsive-pagination/themes/classic-light-dark.css';
// 👆 classic theme, see below for other theme / css options

function MyApp() {
  const [currentPage, setCurrentPage] = useState(8);
  const totalPages = 20;

  return (
    <ResponsivePagination
      current={currentPage}
      total={totalPages}
      onPageChange={setCurrentPage}
    />
  );
}

Three ways to style:

• 🖼️ Ready-to-go themes

  Just import one of the css themes into your project (as shown in the quickstart example above)

  import 'react-responsive-pagination/themes/classic-light-dark.css';
  

  Theme	Example
  classic-light-dark.css
  bootstrap-light-dark.css (Bootstrap not required)
  minimal-light-dark.css

  Themes also available as light only, please see the Themes guide for more details (including overridable theme attributes)

• 🎨 Custom CSS styling

  Custom CSS styles? No problem - see the Custom Styles Guide

• 🥾 Bootstrap 4 and 5

  Using Bootstrap in your project? react-responsive-pagination just works with Bootstrap (no need for any additional styles). See the Bootstrap Getting Started Guide

✔︎ Requirements / Compatibility

• React 19, 18, 17 and 16.8 upwards
• Modern browsers only - not suitable for IE 11

🔧 Props

Common Props

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, note that the active page will not change unless the current prop is updated to reflect the new page (as in the example above). The newPage value is indexed from 1
... many more props ...	See Props Reference for the full list