Skip to content
main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

React Responsive Pagination

npm version minzipped size GitHub license Test Release semantic-release

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

react-responsive-pagination example

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

🥾 Works out of the box with Bootstrap 4.x

Using Bootstrap? See the Bootstrap 4 Getting Started Guide

🎨 Supports custom styling

Custom styles? No problem - see the Custom Styles Guide

Quick Start

npm install react-responsive-pagination
// ... make sure appropriate css is in the project (see guides 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}
    />
  );
}

✔︎ Requirements / Compatibility

  • React 16.8 (the one with hooks)
  • Modern browsers only - not suitable for IE 11

🔧 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
previousLabel (optional) string (optional) The label for the previous button, default value is «
nextLabel (optional) string (optional) The label for the next button, default value is »

About Auto Sizing

More info in the FAQ

About

A React pagination component which intelligently renders to the available width

Resources

License

Packages

No packages published