react-responsive-pagination

React Responsive Pagination

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

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

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

⭐️ v1 user? See the v1 migration guide to get started with v2 ⭐️

🎨 Supports custom styling and also works out of the box with Bootstrap 4 or 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 10px;
  color: #007bff;
  text-decoration: none;
}

.page-item.active .page-link {
  font-weight: bold;
}

.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

See Props Reference for the full list

ℹ About Auto Sizing

More info in the FAQ