Gathering detailed insights and metrics for react-paginate
Gathering detailed insights and metrics for react-paginate
Gathering detailed insights and metrics for react-paginate
Gathering detailed insights and metrics for react-paginate
A ReactJS component that creates a pagination
npm install react-paginate
Typescript
Module System
Node Version
NPM Version
92.4
Supply Chain
98.2
Quality
75.9
Maintenance
100
Vulnerability
100
License
Updated on 04 Dec 2024
Minified
Minified + Gzipped
JavaScript (99.37%)
CSS (0.63%)
Cumulative downloads
Total Downloads
Last day
27.9%
Compared to previous day
Last week
2%
Compared to previous week
Last month
0.6%
Compared to previous month
Last year
10%
Compared to previous year
1
1
25
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
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.
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:
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/
See CONTRIBUTE.md
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
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
Reason
project is not fuzzed
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
21 existing vulnerabilities detected
Details
Score
Last Scanned on 2024-12-02
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