A ReactJS component that creates a pagination
Installations
npm install react-paginate
Developer Guide
Typescript
No
Module System
CommonJS
Node Version
18.15.0
NPM Version
9.6.4
Score
92.4
Supply Chain
98.2
Quality
75.9
Maintenance
100
Vulnerability
100
License
Releases
Contributors
Languages
JavaScript (99.37%)
CSS (0.63%)
Developer
AdeleD
Download Statistics
Total Downloads
90,152,325
Last Day
15,156
Last Week
427,609
Last Month
1,753,620
Last Year
22,251,203
GitHub Statistics
2,757 Stars
708 Commits
628 Forks
14 Watching
18 Branches
62 Contributors
Package Meta Information
Latest Version
8.2.0
Package Id
react-paginate@8.2.0
Unpacked Size
112.31 kB
Size
29.43 kB
File Count
15
NPM Version
9.6.4
Node Version
18.15.0
Publised On
12 Apr 2023
Total Downloads
Cumulative downloads
Total Downloads
90,152,325
Last day
-12.7%
15,156
Compared to previous day
Last week
-5.8%
427,609
Compared to previous week
Last month
-4.6%
1,753,620
Compared to previous month
Last year
9.7%
22,251,203
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
1
Dev Dependencies
25
react-paginate
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
Installation
Install react-paginate
with npm:
npm install react-paginate --save
Usage
1import React, { useEffect, useState } from 'react'; 2import ReactDOM from 'react-dom'; 3import ReactPaginate from 'react-paginate'; 4 5// Example items, to simulate fetching from another resources. 6const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]; 7 8function Items({ currentItems }) { 9 return ( 10 <> 11 {currentItems && 12 currentItems.map((item) => ( 13 <div> 14 <h3>Item #{item}</h3> 15 </div> 16 ))} 17 </> 18 ); 19} 20 21function PaginatedItems({ itemsPerPage }) { 22 // Here we use item offsets; we could also use page offsets 23 // following the API or data you're working with. 24 const [itemOffset, setItemOffset] = useState(0); 25 26 // Simulate fetching items from another resources. 27 // (This could be items from props; or items loaded in a local state 28 // from an API endpoint with useEffect and useState) 29 const endOffset = itemOffset + itemsPerPage; 30 console.log(`Loading items from ${itemOffset} to ${endOffset}`); 31 const currentItems = items.slice(itemOffset, endOffset); 32 const pageCount = Math.ceil(items.length / itemsPerPage); 33 34 // Invoke when user click to request another page. 35 const handlePageClick = (event) => { 36 const newOffset = (event.selected * itemsPerPage) % items.length; 37 console.log( 38 `User requested page number ${event.selected}, which is offset ${newOffset}` 39 ); 40 setItemOffset(newOffset); 41 }; 42 43 return ( 44 <> 45 <Items currentItems={currentItems} /> 46 <ReactPaginate 47 breakLabel="..." 48 nextLabel="next >" 49 onPageChange={handlePageClick} 50 pageRangeDisplayed={5} 51 pageCount={pageCount} 52 previousLabel="< previous" 53 renderOnZeroPageCount={null} 54 /> 55 </> 56 ); 57} 58 59// Add a <div id="container"> to your HTML to see the component rendered. 60ReactDOM.render( 61 <PaginatedItems itemsPerPage={4} />, 62 document.getElementById('container') 63);
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.
Props
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. |
Demo
To run the demo locally, clone the repository and move into it:
1git clone git@github.com:AdeleD/react-paginate.git 2cd react-paginate
Install dependencies:
1npm install
Prepare the demo:
1npm run demo
Run the server:
1npm run serve
Open your browser and go to http://localhost:3000/
Contribute
See CONTRIBUTE.md
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 7/20 approved changesets -- score normalized to 3
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 17 are checked with a SAST tool
Reason
22 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
2.5
/10
Last Scanned on 2024-12-23
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More