React-paginate-accessible NPM

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:

Installation

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.

Demo

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/.

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.
`onPageChange`	`Function`	The method to call when a page is clicked. Exposes the current 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.
`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.
`hrefBuilder`	`Function`	The method is called to generate the `href` attribute value on tag `a` of each page element.

Contribute

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

react-component paginate paginator pagination

classnames prop-types react react-addons-create-fragment

@infinitebrahmanuniverse/nolb-react-pa @everything-registry/sub-chunk-2602

4.3.1

6 years ago

4.2.1

7 years ago