react-paginate-single-ul v0.0.3

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 git@github.com: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

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