Themes

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

react-responsive-pagination comes with a number of ready-to-go pre-styled themes, each theme is a pre-built configurable css stylesheet, ready to be included in a front-end project - see below for the list of available themes. All themes support overridable attributes, see Configuring a theme for more details

See below for available themes

Installation

Install react-responsive-pagination from npm:

npm install react-responsive-pagination

Theme quick start

Using a theme is simple, just include the theme css file somewhere in your project (usually a root page or maybe the file where the global css file is being included).

For example, using the Classic theme:

import React, { useState } from 'react';
import ResponsivePagination from 'react-responsive-pagination';

import 'react-responsive-pagination/themes/classic.css';
// ^ classic theme, see below for other themes
// include this once in the project (preferrably the main index.js)

export default function MyApp() {
  const totalPages = 120;
  const [currentPage, setCurrentPage] = useState(1);

  function handlePageChange(page) {
    setCurrentPage(page);
    // ... do something with \`page\`
  }

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

(see Configuring a theme for details on overriding theme attributes, also please see Props Reference for more information on Props)

1. Classic theme

2. Bootstrap theme (without Bootstrap)

Bootstrap 5 styled pagination. Standalone styles, no need to install the full Bootstrap library

3. Minimal theme

Configuring a theme (optional)

All themes are ready-to-go but various attributes can be overridden (if required)

To override an attribute: add a root selector to the project’s global stylesheet (create a global stylesheet if necessary) and then define one or more css variables in the root selector:

:root {
  --pagination-color: #0d6efd;
  --pagination-hover-color: #0a58ca;
  /* etc */
}

See Common overridable variables below and also see the respective theme source files (linked above) for a full list of supported variables

Common overridable variables

(see the Configuring a theme section above for details on overriding theme attributes)

Also please see each theme source files for a full list of variables supported by that theme (linked above in the respective theme section)

Need custom css?

Users looking to fully customise the component’s appearance can create a new set of styles within their project (optionally using these themes as a starting point).

For inspiration, please see the theme files at: https://github.com/jonelantha/react-responsive-pagination/tree/main/packages/react-responsive-pagination/themes and please also see the custom styles guide