react-paginate-single-ul

react-paginate-single-ul

A ReactJS component to render a pagination.

By installing this component and writing only a little bit of CSS you can obtain this:

or

Installation

Install react-paginate-single-ul with npm:

$ npm install react-paginate-single-ul

For CommonJS users:

import ReactPaginate from 'react-paginate-single-ul';

What's it look like?

<ReactPaginate previousLabel={"Previous"}
   previousClassName={"pagination-prev"}
   nextLabel={"Next"}
   nextClassName={"pagination-next"}
   breakLabel={<li className="break"><a href="">...</a></li>}
   pageNum={this.props.totalPages}
   marginPagesDisplayed={2}
   pageRangeDisplayed={8}
   clickCallback={this.handlePageClick}
   containerClassName={"pagination"}
   activeClassName={"active"} />

Read the code of demo/js/demo.js. You will quickly understand how to make react-paginate-single-ul work with a list of objects.

Demo

Clone the repository and move into:

$ git clone [e-mail]:dotsub/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/.

Props

| Name | Type | Description | | --- | --- | --- | --- | | pageNum | 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. | | clickCallback | Function | The method to call when a page is clicked. | | initialSelected | Number | The initial page selected. | | forceSelected | Number | To override selected page with parent prop. | | containerClassName | String | The classname of the pagination container. | | subContainerClassName | String | The classname of the pagination subcontainer. | | pageClassName | String | The classname on tag li of each page element. | | pageLinkClassName | String | The classname on tag a of each page element. | | activeClassName | String | The classname for the active page. | | 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. |

Contribute

1. Submit an issue
2. Fork the repository
3. Create a dedicated branch (never ever work in master)
4. The first time, run command: webpack into the directory
5. Run npm start
6. Fix bugs or implement features
7. Always write tests

Run tests:

$ make test