Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
react-paginate
Advanced tools
A ReactJS component that creates a pagination.
Weekly downloads
Readme
A ReactJS component to render a pagination.
By installing this component and writing only a little bit of CSS you can obtain this: Note: You should write your own css to obtain this UI. This package do not provide any css.
or
Install react-paginate
with npm:
npm install react-paginate --save
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import ReactPaginate from 'react-paginate';
// Example items, to simulate fetching from another resources.
const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
function Items({ currentItems }) {
return (
<>
{currentItems &&
currentItems.map((item) => (
<div>
<h3>Item #{item}</h3>
</div>
))}
</>
);
}
function PaginatedItems({ itemsPerPage }) {
// Here we use item offsets; we could also use page offsets
// following the API or data you're working with.
const [itemOffset, setItemOffset] = useState(0);
// Simulate fetching items from another resources.
// (This could be items from props; or items loaded in a local state
// from an API endpoint with useEffect and useState)
const endOffset = itemOffset + itemsPerPage;
console.log(`Loading items from ${itemOffset} to ${endOffset}`);
const currentItems = items.slice(itemOffset, endOffset);
const pageCount = Math.ceil(items.length / itemsPerPage);
// Invoke when user click to request another page.
const handlePageClick = (event) => {
const newOffset = (event.selected * itemsPerPage) % items.length;
console.log(
`User requested page number ${event.selected}, which is offset ${newOffset}`
);
setItemOffset(newOffset);
};
return (
<>
<Items currentItems={currentItems} />
<ReactPaginate
breakLabel="..."
nextLabel="next >"
onPageChange={handlePageClick}
pageRangeDisplayed={5}
pageCount={pageCount}
previousLabel="< previous"
renderOnZeroPageCount={null}
/>
</>
);
}
// Add a <div id="container"> to your HTML to see the component rendered.
ReactDOM.render(
<PaginatedItems itemsPerPage={4} />,
document.getElementById('container')
);
Test it on CodePen.
You can also read the code of demo/js/demo.js to quickly understand how to make react-paginate
work with a list of objects.
Finally there is this CodePen demo, with features fetching sample code (using GitHub API) and two synchronized pagination widgets.
Name | Type | Description |
---|---|---|
pageCount | Number | Required. The total number of pages. |
pageRangeDisplayed | Number | The range of pages displayed. |
marginPagesDisplayed | Number | The number of pages to display for margins. |
previousLabel | Node | Label for the previous button. |
nextLabel | Node | Label for the next button. |
breakLabel | Node | Label for ellipsis. |
breakAriaLabels | Shape | Aria labels of ellipsis elements (Default are { forward: 'Jump forward', backward: 'Jump backward' } ). |
breakClassName | String | The classname on tag li of the ellipsis element. |
breakLinkClassName | String | The classname on tag a of the ellipsis element. |
onPageChange | Function | The method to call when a page is changed. Exposes the current page object as an argument. |
onClick | Function | A callback for any click on the component. Exposes information on the part clicked (for eg. isNext for next control), the next expected page nextSelectedPage & others. Can return false to prevent any page change or a number to override the page to jump to. |
onPageActive | Function | The method to call when an active page is clicked. Exposes the active page object as an argument. |
initialPage | Number | The initial page selected, in uncontrolled mode. Do not use with forcePage at the same time. |
forcePage | Number | To override selected page with parent prop. Use this if you want to control the page from your app state. |
disableInitialCallback | boolean | Disable onPageChange callback with initial page. Default: false |
containerClassName | String | The classname of the pagination container. |
className | String | Same as containerClassName . For use with styled-components & other CSS-in-JS. |
pageClassName | String | The classname on tag li of each page element. |
pageLinkClassName | String | The classname on tag a of each page element. |
pageLabelBuilder | Function | Function to set the text on page links. Defaults to (page) => page |
activeClassName | String | The classname for the active page. It is concatenated to base class pageClassName . |
activeLinkClassName | String | The classname on the active tag a . It is concatenated to base class pageLinkClassName . |
previousClassName | String | The classname on tag li of the previous button. |
nextClassName | String | The classname on tag li of the next button. |
previousLinkClassName | String | The classname on tag a of the previous button. |
nextLinkClassName | String | The classname on tag a of the next button. |
disabledClassName | String | The classname for disabled previous and next buttons. |
disabledLinkClassName | String | The classname on tag a for disabled previous and next buttons. |
hrefBuilder | Function | The method is called to generate the href attribute value on tag a of each page element. |
hrefAllControls | Bool | By default the hrefBuilder add href only to active controls. Set this prop to true so href are generated on all controls (see). |
extraAriaContext | String | DEPRECATED: Extra context to add to the aria-label HTML attribute. |
ariaLabelBuilder | Function | The method is called to generate the aria-label attribute value on each page link |
eventListener | String | The event to listen onto before changing the selected page. Default is: onClick . |
renderOnZeroPageCount | Function | A render function called when pageCount is zero. Let the Previous / Next buttons be displayed by default (undefined ). Display nothing when null is provided. |
prevRel | String | The rel property on the a tag for the prev page control. Default value prev . Set to null to disable. |
nextRel | String | The rel propery on the a tag for the next page control. Default value next . Set to null to disable. |
prevPageRel | String | The rel property on the a tag just before the selected page. Default value prev . Set to null to disable. |
selectedPageRel | String | The rel propery on the a tag for the selected page. Default value canonical . Set to null to disable. |
nextPageRel | String | The rel property on the a tag just after the selected page. Default value next . Set to null to disable. |
To run the demo locally, clone the repository and move into it:
git clone git@github.com:AdeleD/react-paginate.git
cd react-paginate
Install dependencies:
npm install
Prepare the demo:
npm run demo
Run the server:
npm run serve
Open your browser and go to http://localhost:3000/
See CONTRIBUTE.md
FAQs
A ReactJS component that creates a pagination.
The npm package react-paginate receives a total of 345,961 weekly downloads. As such, react-paginate popularity was classified as popular.
We found that react-paginate 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
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.