Custom Styles
react-responsive-pagination is an easy to use React responsive pagination component which always outputs the right number of pagination elements for the width available, no guesswork needed
Easy to style, just include the necessary css in your project (see examples below)
Installation
Install react-responsive-pagination from npm:
npm install react-responsive-pagination
Quick Start
import React, { useState } from 'react';import Pagination from 'react-responsive-pagination';import './pagination.css'; // see pagination.css examples below
export default function MyApp() { const totalPages = 120; const [currentPage, setCurrentPage] = useState(1);
function handlePageChange(page) { setCurrentPage(page); // ... do something with `page` }
return ( <Pagination total={totalPages} current={currentPage} onPageChange={page => handlePageChange(page)} /> );}
See below for pagination.css examples
(for more information on Props, see Props Reference, for a class component example see here)
Custom Styling
To create custom styles for react-responsive-pagination simply include some custom css - the four examples below should provide a good starting point. For a full list of suggested css selectors to target, see Selector Reference
Using Bootstrap 4.x? No problem, see the Bootstrap Pagination guide.
Example 1 - Basic Pagination
.pagination { justify-content: center; display: flex; padding-left: 0; list-style: none;}Show all - 30 more lines
.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;}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
For a full list of suggested css selectors to target, see Selector Reference
Example 2 - Classic Pagination
.pagination { justify-content: center; display: flex; padding-left: 0; list-style: none;}Show all - 38 more lines
.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;}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
For a full list of suggested css selectors to target, see Selector Reference
Example 3 - Advanced Pagination
.pagination { justify-content: center; display: flex; padding-left: 0; list-style: none;}Show all - 41 more lines
.page-item .page-link { position: relative; display: block; margin: 0 5px; min-height: 40px; min-width: 40px; border-radius: 20px; text-align: center; line-height: 40px; color: #007bff; text-decoration: none;}
.page-item a.page-link:hover { background-color: #cccccc;}
.page-item.active .page-link { font-weight: 700; color: #ffffff; background-color: #007bff;}
.page-item.disabled .page-link { color: #6c757d; pointer-events: none; cursor: auto;}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
For a full list of suggested css selectors to target, see Selector Reference
Example 4 - Standalone Bootstrap 4 Styles
Pagination css:
.pagination { display: -ms-flexbox; display: flex; padding-left: 0; list-style: none; border-radius: 0.25rem;}Show all - 67 more lines
.justify-content-center { justify-content: center !important;}
.page-link { position: relative; display: block; padding: 0.5rem 0.75rem; margin-left: -1px; line-height: 1.25; color: #007bff; background-color: #fff; border: 1px solid #dee2e6;}
.page-link:hover { z-index: 2; color: #0056b3; text-decoration: none; background-color: #e9ecef; border-color: #dee2e6;}
.page-link:focus { z-index: 3; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);}
.page-item:first-child .page-link { margin-left: 0; border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;}
.page-item:last-child .page-link { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem;}
.page-item.active .page-link { z-index: 3; color: #fff; background-color: #007bff; border-color: #007bff;}
.page-item.disabled .page-link { color: #6c757d; pointer-events: none; cursor: auto; background-color: #fff; border-color: #dee2e6;}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
For a full list of suggested css selectors to target, see the next section
Selector Reference
Selector | Notes |
---|---|
.pagination | Pagination container (<ul> tag) The recommended style is a horizontal flexbox (see examples above) |
.page-item | Item containers (<li> tags) Styles may not be needed for this selector, see selector below |
.page-item .page-link | Item elements (<a> or <span> tags) Includes links and static labels. Style as a block element with appropriate font, margin and border (see examples above) |
.page-item a.page-link | Clickable item elements (<a> tags) Page links or the next/previous buttons (if they are clickable) |
.page-item.active .page-link | Active page link (<a> tags) CSS should highlight this element (see examples above) |
.page-item.disabled .page-link | Disabled items (<span> tags) Includes '...' or disabled nav buttons. CSS should show grey out these elements (see examples above) |
.sr-only | Screen reader only elements (<span> tags) Required for accessibility. These elements not be visible, use CSS to visually hide these elements in a way screen readers can still read the text (see below for an example) |
Screen reader only (.sr-only) styles
To enhance Accessibility, the .sr-only
style is used to visually hide content meant only for users using screen readers. Typically css for this selector would be:
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
CSS-TRICKS - Inclusively Hidden
(this css included in the css examples above)
Overriding default classNames
If needed, you can easily override the default class names by adding the following props:
className Prop | Description |
---|---|
className | Class name for the top level <ul> container |
pageItemClassName | Class name for all the <li> elements |
pageLinkClassName | Class name for <a> or <span> child elements within an <li> element |
activeItemClassName | Appended to <li> class name for the active element |
disabledItemClassName | Appended to <li> class name for non-clickable elements (disabled nav buttons and the break/ellipsis) |
srOnlyClassName | Class for screen reader only content (which should be visually hidden). See an example of typical .sr-only css |
Example - overriding default class names
<Pagination className="my-pagination" pageItemClassName="my-item" pageLinkClassName="my-link" activeItemClassName="my-active" disabledItemClassName="my-disabled" // ...other props/>
// would create html like this
<ul class="my-pagination"> <li class="my-item my-disabled"> <span class="my-link"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </span> </li> <li class="my-item my-active"> <a class="my-link" href="#" aria-label="(current)"> <span aria-hidden="true">1</span> <span class="sr-only">(current)</span> </a> </li> <li class="my-item"> <a class="my-link" href="#">2</a> </li> <!-- ... more elements --></ul>
Other Options
Previous and Next Labels
Change the default labels for the previous and next buttons by setting the previousLabel
and nextLabel
props:
Example - Text labels
<Pagination ... previousLabel="Previous" nextLabel="Next" />
Useful Props For Customisation
A selection of props which may be helpful when using custom styles - for the full list of props see Props Reference
Prop | Description |
---|---|
className string (optional) | Class name for the top level <ul> container Defaults to |
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: Defaults to |
pageItemClassName string (optional) | Class name for all the <li> elements Defaults to |
pageLinkClassName string (optional) | Class name for <a> or <span> child elements within an <li> element:
Defaults to |
activeItemClassName string (optional) | Appended to <li> class name for the active element:
Defaults to |
disabledItemClassName string (optional) | Appended to <li> class name for non-clickable elements (disabled nav buttons and the break/ellipsis):
Defaults to |
srOnlyClassName string (optional) | Class for screen reader only content (which should be visually hidden) - see an example of typical css for this purpose Defaults to |
previousLabel string (optional) | The label for the previous button, defaults to |
nextLabel string (optional) | The label for the next button, defaults to |