Skip to content

jonelantha/react-responsive-pagination

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

🌟 Just updated for React 18 🌟

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

react-responsive-pagination example

📕 Visit https://react-responsive-pagination.elantha.com to get started 🚀

🥾 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 18, 17 and 16.8 upwards
  • Modern browsers only - not suitable for IE 11

🔧 Props

Common Props

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

ClassName Props

See Overriding default classNames for more information

Prop Description
className
string
(optional)
Class name for the top level <ul> container
Defaults to pagination, overrides extraClassName prop (below)
extraClassName
string
(optional)
Useful when using Bootstrap styles, extra classNames to be added to the top level <ul> container. Use this prop to override the default justify value - for example to align elements to the start of the page use: justify-content-start
Defaults to justify-content-center, not applicable if className prop (above) is set
pageItemClassName
string
(optional)
Class name for all the <li> elements
Defaults to page-item
pageLinkClassName
string
(optional)
Class name for <a> or <span> child elements within an <li> element:
<li ...><a class='page-link'>1</a></li>
Defaults to page-link
activeItemClassName
string
(optional)
Appended to <li> class name for the active element:
<li class='page-item active'><a class='page-link'>1</a></li>
Defaults to active
disabledItemClassName
string
(optional)
Appended to <li> class name for non-clickable elements (disabled nav buttons and the break/ellipsis):
<li class='page-item disabled'><span class='page-link'>...</span></li>
Defaults to disabled
srOnlyClassName
string
(optional)
Class for screen reader only content (which should be visually hidden) - see an example of typical css for this purpose
Defaults to sr-only

Label Props

Prop Description
previousLabel
string
(optional)
The label for the previous button, defaults to «
nextLabel
string
(optional)
The label for the next button, defaults to »

Misc Props

Prop Description
narrowStrategy
'dropEllipsis' | 'dropNav' | ('dropEllipsis' | 'dropNav')[]
(optional)
Specify that nav buttons («/») and/or the ellipsis () can be dropped for very narrow widths (useful if the component is used in narrow widths with high page numbers)
'dropEllipsis' - drop the ellipsis () for narrow widths
'dropNav' - drop the nav («/») for narrow widths
['dropNav', 'dropEllipsis'] - drop the nav initially and then further drop the ellipsis if required
['dropEllipsis', 'dropNav'] - drop the ellipsis initially and then further drop the nav if required

See Props Reference for the full list

About Auto Sizing

More info in the FAQ

About

A React pagination component which intelligently renders to the available width

Resources

License

Stars

Watchers

Forks

Packages

No packages published