A ReactJS component to render a pagination.
By installing this component and writing only a little bit of CSS you can obtain this:
or
Install react-paginate
with npm:
npm install react-paginate --save
For CommonJS users:
import ReactPaginate from 'react-paginate';
Read the code of demo/js/demo.js. You will quickly understand
how to make react-paginate
work with a list of objects.
Clone the repository and move into:
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/
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. |
forcePage |
Number |
To override selected page with parent prop. |
disableInitialCallback |
boolean |
Disable onPageChange callback with initial page. Default: false |
containerClassName |
String |
The classname of the pagination container. |
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". |
- Submit an issue
- Fork the repository
- Create a dedicated branch (never ever work in
master
) - The first time, run command:
webpack
into the directory - Run
npm start
- Fix bugs or implement features
- Always write tests
Run tests:
make test