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

MyApp.js
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

For a full list of suggested css selectors to target, see Selector Reference

Example 2 - Classic Pagination

For a full list of suggested css selectors to target, see Selector Reference

Example 3 - Advanced Pagination

For a full list of suggested css selectors to target, see Selector Reference

Example 4 - Standalone Bootstrap 4 Styles

Pagination css:

For a full list of suggested css selectors to target, see the next section

Selector Reference

SelectorNotes
.paginationPagination container (<ul> tag)
The recommended style is a horizontal flexbox (see examples above)
.page-itemItem containers (<li> tags)
Styles may not be needed for this selector, see selector below
.page-item .page-linkItem 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-linkClickable item elements (<a> tags)
Page links or the next/previous buttons (if they are clickable)
.page-item.active .page-linkActive page link (<a> tags)
CSS should highlight this element (see examples above)
.page-item.disabled .page-linkDisabled items (<span> tags)
Includes '...' or disabled nav buttons. CSS should show grey out these elements (see examples above)
.sr-onlyScreen 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 PropDescription
classNameClass name for the top level <ul> container
pageItemClassNameClass name for all the <li> elements
pageLinkClassNameClass name for <a> or <span> child elements within an <li> element
activeItemClassNameAppended to <li> class name for the active element
disabledItemClassNameAppended to <li> class name for non-clickable elements (disabled nav buttons and the break/ellipsis)
srOnlyClassNameClass 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

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

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

previousLabel
string
(optional)

The label for the previous button, defaults to «

nextLabel
string
(optional)

The label for the next button, defaults to »

narrowStrategy
'dropEllipsis' | 'dropNav' | ('dropEllipsis' | 'dropNav')[]
(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)

'dropEllipsis' - drop the ellipsis (…) for narrow widths
'dropNav' - drop the nav («/») for narrow widths
['dropNav', 'dropEllipsis'] - drop the nav initially and then further drop the ellipsis if required
['dropEllipsis', 'dropNav'] - drop the ellipsis initially and then further drop the nav if required

The default behaviour is to not drop these elements (this may change in a future major release)