react-responsive-pagination

React Responsive Pagination

A React pagination component which intelligently renders to the available width. Styled for Bootstrap 4

How do I use it?

• Make sure your project is using the Bootstrap 4 CSS styles

• 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 the About Auto Sizing section below for info on some limitations of the auto sizing algorithm.

More details...

Requirements / Compatibility

• React 16.8 (the one with hooks)

• Bootstrap 4 CSS styles used in your project

• Modern browsers only (IE 11 is untested and unlikely to work)

Usage Example

• The Bootstrap 4 CSS styles needs to be included in the project for this example to work

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

Auto sizing uses the width of the immediate parent element. For best results make sure the parent element isn't intrinsically sized; that means the width of the parent element shouldn't depend on its contents. If your layout is intrinsic then the pagination component should still fill the space correctly but you may occasionally see inconsistant results or additional renders.

You can choose to override the auto sizing by specifying the maxWidth prop (see Props section below).

The final thing to note is that for very narrow widths the component may exceed the available space - this is to ensure that there's always a usable pagination component.

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