React Responsive Pagination

!npm version
!minzipped size
!GitHub license
!release

A React pagination component which intelligently renders to a given pixel width. Styled for Bootstrap 4

!Example pagination

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 (see below for a more detailed example)

More details...

$3

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

$3

- The example below includes a simple useWindowWidth hook which supplies the pagination component with the browser's window width.

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

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

function MyApp() {
const windowWidth = useWindowWidth();

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

const totalPages = 17;

return (
current={currentPage}
total={totalPages}
onPageChange={setCurrentPage}
maxWidth={windowWidth}
/>
);
}

function useWindowWidth() {
const [windowWidth, setWindowWidth] = useState(window.innerWidth);

useEffect(() => {
const resizeHandler = () => {
setWindowWidth(window.innerWidth);
};

window.addEventListener('resize', resizeHandler);
return () => {
window.removeEventListener('resize', resizeHandler);
};
}, []);

return windowWidth;
}
`

$3

| 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. Note this width may be exceeded in the case where it's not possible to output a small enough component |