# react-js-pagination
> Simple, easy to use component for pagination. Compatible with bootstrap paginator stylesheets
Latest version **3.0.3** (published 2020-02-18) · CC0-1.0 license · 0 weekly downloads
## Install
```sh
npm install react-js-pagination
pnpm add react-js-pagination
yarn add react-js-pagination
bun add react-js-pagination
```
## Health
**Score 23/100 (F)** — status: abandoned.
Positive: has types package; no vulnerabilities; high quality score.
Warnings: low downloads; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 3.0.3 |
| Published | 2020-02-18 |
| First published | 2015-09-30 |
| Weekly downloads | 0 |
| License | CC0-1.0 |
| TypeScript types | separate (@types/react-js-pagination) |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 3.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 347 |
| Author | Sergey Vayser |
| Maintainers | vayser, wagoid |
| Keywords | react, reactjs, pagination, paginator, bootstrap, reload, webpack, babel, react-transform, react-component |
## Links
- npm: https://www.npmjs.com/package/react-js-pagination
- Repository: https://github.com/vayser/react-js-pagination
- Issues: https://github.com/vayser/react-js-pagination/issues
- npm.io page: https://npm.io/package/react-js-pagination
## Dependencies (6)
- [tar](https://npm.io/package/tar.md) 2.2.2
- [react](https://npm.io/package/react.md) 15.x.x - 16.x.x
- [fstream](https://npm.io/package/fstream.md) 1.0.12
- [paginator](https://npm.io/package/paginator.md) ^1.0.0
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [prop-types](https://npm.io/package/prop-types.md) 15.x.x - 16.x.x
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 3.0.3 (latest) — 2020-02-18
- 3.0.2 — 2018-04-26
- 3.0.1 — 2018-02-01
- 3.0.0 — 2017-10-08
- 2.3.0 — 2017-10-05
- 2.2.0 — 2017-08-03
- 2.1.0 — 2017-05-08
- 2.0.3 — 2017-05-06
- 2.0.2 — 2016-12-28
- 2.0.1 — 2016-11-03
- 2.0.0 — 2016-09-04
- 1.2.0 — 2016-09-04
- 1.1.16 — 2016-05-26
- 1.1.15 — 2016-03-27
- 1.1.14 — 2015-12-02
- … 7 more at https://npm.io/package/react-js-pagination/versions
## README
[](https://travis-ci.org/vayser/react-js-pagination)
[](https://nodei.co/npm/react-js-pagination/)
# react-js-pagination
**A ReactJS [dumb](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) component to render a pagination.**
The component comes with no built-in styles. HTML layout compatible with [Bootstrap 3](https://getbootstrap.com/docs/3.4/components/#pagination) pagination stylesheets.
If you would like it to work for Bootstrap 4, you will need to add 2 additional props when using this component:
```
itemClass="page-item"
linkClass="page-link"
```
## Installation
Install `react-js-pagination` with [npm](https://www.npmjs.com/):
```
$ npm install react-js-pagination
```
## Usage
Very easy to use. Just provide props with total amount of things that you want to display on the page.
```js
import React, { Component } from "react";
import ReactDOM from "react-dom";
import Pagination from "react-js-pagination";
require("bootstrap/less/bootstrap.less");
class App extends Component {
constructor(props) {
super(props);
this.state = {
activePage: 15
};
}
handlePageChange(pageNumber) {
console.log(`active page is ${pageNumber}`);
this.setState({activePage: pageNumber});
}
render() {
return (
);
}
}
ReactDOM.render(, document.getElementById("root"));
```
Check [Live example](http://vayser.github.io/react-js-pagination)
## Params
Name | Type | Default | Description
--- | --- | --- | --- |
`totalItemsCount` | Number | | **Required.** Total count of items which you are going to display
`onChange` | Function | | **Required.** Page change handler. Receive pageNumber as arg
`activePage` | Number | `1` | **Required.** Active page
`itemsCountPerPage` | Number | `10` | Count of items per page
`pageRangeDisplayed` | Number | `5` | Range of pages in paginator, exclude navigation blocks (prev, next, first, last pages)
`prevPageText` | String / ReactElement | `⟨` | Text of prev page navigation button
`firstPageText` | String / ReactElement | `«` | Text of first page navigation button
`lastPageText` | String / ReactElement | `»` | Text of last page navigation button
`nextPageText` | String / ReactElement | `⟩` | Text of next page navigation button
`getPageUrl` | Function | | Generate href attribute for page
`innerClass` | String | `pagination` | Class name of `