@thehappycoder/react-responsive-pagination v1.0.2

React Responsive Pagination

A React pagination component which intelligently renders to a given pixel 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} maxWidth={maxWidth}/> (see below for a more detailed example)

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

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 (
    <Pagination
      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;
}

Props