react-responsive-pagination

React Responsive Pagination

A React pagination component which intelligently renders to the available width.

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

How do I use it?

• Works out of the box with Bootstrap 4 CSS styles or alternatively you can provide your own styles, see Custom Styles Guide for more information

• Include the pagination component in your React project with npm install react-responsive-pagination

• Import the component with import Pagination from 'react-responsive-pagination'

• Use the component with <Pagination current={currentPage} total={totalPages} onPageChange={pageChangeHandler} /> (see Usage Example for a more detailed example)

• See About Auto Sizing in the FAQ for info on some limitations of the auto sizing algorithm.

More details...

Requirements / Compatibility

• React 16.8 (the one with hooks)

• Provide the correct styles in your project:

  • Either Bootstrap 4 CSS styles
  • Or use custom styles, see Custom Styles Guide for more details

• Modern browsers only - not suitable for IE 11

Usage Example

• This example relies on suitable css styles bring included in the project (see requirements above)

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

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

  const totalPages = 17;

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

About Auto Sizing

More info in the FAQ

Props

Prop name	Type	Description
current	number	The current active page. Indexed from 1
total	number	The total number of pages
onPageChange	(newPage: number) => void	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 (optional)	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