Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
react-responsive-pagination
Advanced tools
A responsive React pagination component which intelligently renders to the available width
🌟 Just updated for React 18 🌟
Using Bootstrap? See the Bootstrap 4 Getting Started Guide
Custom styles? No problem - see the Custom Styles Guide
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}
/>
);
}
Prop | Description |
---|---|
currentnumber (required) | The current active page. Indexed from 1 |
totalnumber (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 |
maxWidthnumber (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 |
See Overriding default classNames for more information
Prop | Description |
---|---|
classNamestring (optional) | Class name for the top level <ul> container Defaults to pagination , overrides extraClassName prop (below) |
extraClassNamestring (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 |
pageItemClassNamestring (optional) | Class name for all the <li> elements Defaults to page-item |
pageLinkClassNamestring (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 |
activeItemClassNamestring (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 |
disabledItemClassNamestring (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 |
srOnlyClassNamestring (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 |
Prop | Description |
---|---|
previousLabelstring (optional) | The label for the previous button, defaults to « |
nextLabelstring (optional) | The label for the next button, defaults to » |
See Props Reference for the full list
More info in the FAQ
FAQs
React component for responsive pagination
The npm package react-responsive-pagination receives a total of 5,835 weekly downloads. As such, react-responsive-pagination popularity was classified as popular.
We found that react-responsive-pagination demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.