React Responsive Pagination

A responsive React pagination component which intelligently renders to the available width - for React 16, 17 or 18

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

⭐️ v1 user? See the v1 migration guide to start using v2 ⭐️

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

🎨 Supports custom styling and Bootstrap 4 and 5 🥾

Custom styles? No problem - see the Custom Styles Guide

Using Bootstrap? See the Bootstrap Getting Started Guide

⏳ Quick Start

npm install react-responsive-pagination

import React, { useState } from 'react';
import ResponsivePagination from 'react-responsive-pagination';
// make sure appropriate css is included in the project:
// see css sample below (or import Bootstrap styles)

function MyApp() {
  const [currentPage, setCurrentPage] = useState(4);
  const totalPages = 17;

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

Basic css example, see Custom Styles Guide for more examples or use Bootstrap styles

.pagination {
  justify-content: center;
  display: flex;
  padding-left: 0;
  list-style: none;
}

.page-item .page-link {
  position: relative;
  display: block;
  margin: 0 2px;
  border: 1px solid #cccccc;
  padding: 5px 10px;
  border-radius: 5px;
  color: #007bff;
  text-decoration: none;
}

.page-item a.page-link:hover {
  background-color: #cccccc;
}

.page-item.active .page-link {
  color: #ffffff;
  background-color: #007bff;
}

.page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  cursor: auto;
}

✔︎ Requirements / Compatibility

React 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
maxWidth `number` (optional)	The maximum width (in pixels) of the pagination component. Specify a value if you want to override the automatic sizing. Note this width may be exceeded in the case where it's not possible to output a small enough component

ClassName Props

See Overriding default classNames for more information

Prop	Description
className `string` (optional)	Class name for the top level <ul> container Defaults to `pagination`, overrides extraClassName prop (below)
extraClassName `string` (optional)	Useful when using Bootstrap styles, extra classNames to be added to the top level <ul> container. Use this prop to override the default justify value - for example to align elements to the start of the page use: `justify-content-start` Defaults to `justify-content-center`, not applicable if className prop (above) is set
pageItemClassName `string` (optional)	Class name for all the <li> elements Defaults to `page-item`
pageLinkClassName `string` (optional)	Class name for <a> or <span> child elements within an <li> element: `<li ...><a class='page-link'>1</a></li>` Defaults to `page-link`
activeItemClassName `string` (optional)	Appended to <li> class name for the active element: `<li class='page-item active'><a class='page-link'>1</a></li>` Defaults to `active`
disabledItemClassName `string` (optional)	Appended to <li> class name for non-clickable elements (disabled nav buttons and the break/ellipsis): `<li class='page-item disabled'><span class='page-link'>...</span></li>` Defaults to `disabled`

Label Props

Prop	Description
previousLabel `string` (optional)	The label for the previous button, defaults to `«`
nextLabel `string` (optional)	The label for the next button, defaults to `»`
ariaPreviousLabel `string` (optional)	The accessibility ARIA label for the previous button, defaults to `Previous`
ariaNextLabel `string` (optional)	The accessibility ARIA label for the next button, defaults to `Next`

Misc Props

Prop Description

renderNav
boolean
(optional) When set to false the nav buttons («/») will not be rendered. Defaults to true

narrowBehaviour
NarrowBehaviour
(optional) Specify that nav buttons («/») and/or the ellipsis (…) can be dropped for very narrow widths (useful if the component is used in narrow widths with high page numbers)
Valid behaviours should be imported from react-responsive-pagination/narrowBehaviour, see example

dropEllipsis - drop the ellipsis (…) for narrow widths
dropNav - drop the nav («/») for narrow widths
dropNavThenEllipsis - drop the nav initially and then further drop the ellipsis if required
dropEllipsisThenNav - drop the ellipsis initially and then further drop the nav if required

Prop	Description
renderNav `boolean` (optional)	When set to `false` the nav buttons («/») will not be rendered. Defaults to `true`
narrowBehaviour `NarrowBehaviour` (optional)	Specify that nav buttons («/») and/or the ellipsis (…) can be dropped for very narrow widths (useful if the component is used in narrow widths with high page numbers) Valid behaviours should be imported from `react-responsive-pagination/narrowBehaviour`, see example `dropEllipsis` - drop the ellipsis (…) for narrow widths `dropNav` - drop the nav («/») for narrow widths `dropNavThenEllipsis` - drop the nav initially and then further drop the ellipsis if required `dropEllipsisThenNav` - drop the ellipsis initially and then further drop the nav if required

See Props Reference for the full list

ℹ About Auto Sizing

More info in the FAQ

npm