React Responsive Pagination

!npm version
!minzipped size
!GitHub license

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

``bash
npm install react-responsive-pagination
`

`jsx
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 (
current={currentPage}
total={totalPages}
onPageChange={setCurrentPage}
/>
);
}
`

Three ways to style:

1. 🖼️ 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)

2. 🎨 Custom CSS styling

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

3. 🥾 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

$3

| 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 |