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
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import ReactPaginate from 'react-paginate';
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 }) {
const [currentItems, setCurrentItems] = useState(null);
const [pageCount, setPageCount] = useState(0);
const [itemOffset, setItemOffset] = useState(0);
useEffect(() => {
const endOffset = itemOffset + itemsPerPage;
console.log(`Loading items from ${itemOffset} to ${endOffset}`);
setCurrentItems(items.slice(itemOffset, endOffset));
setPageCount(Math.ceil(items.length / itemsPerPage));
}, [itemOffset, itemsPerPage]);
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}
/>
</>
);
}
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.
You can also check this CodePen demo with fetching sample code (using GitHub API) and synchronized pagination widgets.
Props
Name | Type | Description |
---|
pageCount | Number | Required. The total number of pages. |
pageRangeDisplayed | Number | Required. The range of pages displayed. |
marginPagesDisplayed | Number | Required. 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. |
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 clicked. Exposes the current page object as an argument. |
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. |
activeLinkClassName | String | The classname on the active tag a . |
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. |
hrefBuilder | Function | The method is called to generate the href attribute value on tag a of each page element. |
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 fonction called when pageCount is zero. Let the Previous / Next buttons displayed by default (undefined ). Display nothing when null is provided. |
Demo
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:
make install
Prepare the demo:
make demo
Run the server:
make serve
Open your browser and go to http://localhost:3000/
Contribute
- Submit an issue
- Fork the repository
- Create a dedicated branch (never ever work in
master
) - Run
npm start
http://localhost:3000 - Fix bugs or implement features
- Always write tests
- Format with Prettier
npm run format
and check ESLint npm run lint
Run tests:
make test