# sly-rc-paginator
> A paginator component for react
Latest version **0.0.12** (published 2019-10-21) · 0 weekly downloads
## Install
```sh
npm install sly-rc-paginator
pnpm add sly-rc-paginator
yarn add sly-rc-paginator
bun add sly-rc-paginator
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities.
Warnings: low downloads; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.12 |
| Published | 2019-10-21 |
| First published | 2018-03-26 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 45 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Sulaiman Bisiriyu |
| Maintainers | abolajibisiriyu |
| Keywords | react, paginator, paginate, react-paginator |
## Links
- npm: https://www.npmjs.com/package/sly-rc-paginator
- Repository: https://github.com/abolajibisiriyu/sly-rc-paginator
- Homepage: https://github.com/abolajibisiriyu/sly-rc-paginator#readme
- Issues: https://github.com/abolajibisiriyu/sly-rc-paginator/issues
- npm.io page: https://npm.io/package/sly-rc-paginator
## Dependencies (6)
- [react](https://npm.io/package/react.md) ^16.8.6
- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [webpack](https://npm.io/package/webpack.md) ^4.36.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.6
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.5.5
## 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
- 0.0.12 (latest) — 2019-10-21
- 0.0.11 — 2019-10-21
- 0.0.10 — 2019-10-21
- 0.0.9 — 2019-10-21
- 0.0.8 — 2019-10-21
- 0.0.7 — 2019-10-21
- 0.0.6 — 2019-10-21
- 0.0.5 — 2019-07-21
- 0.0.4 — 2018-03-26
- 0.0.3 — 2018-03-26
- 0.0.2 — 2018-03-26
- 0.0.1 — 2018-03-26
## README
### Installation
$ npm install sly-rc-paginator --save
This paginator component assumes that you have styles for a paginator with the following structure
Also the paginator truncates the list pages to just 10.
### Usage
import React, { Component } from "react";
import Paginator from "sly-rc-paginator";
class App extends Component {
constructor() {
super();
this.state = {
meta: { // demo meta data from API
totalItems: 100,
currentPage: 1,
itemsPerPage: 5
}
};
}
onPageChange(currentPage) {
this.setState(prevSate => {
return {
posts: json, // do stuff with json
meta: { // update meta data
...prevSate.meta,
currentPage
}
};
});
}
render() {
const pagintorOptions = {
ulClassName: "pagination",
liClassName: "page-item",
activeClassName: "active",
disabledClassName: "disabled"
};
return (
);
}
}
export default App;
### Props
| name | type | required | description |
| ------------------------- | ------------------- | -------- | -------------------------------------------------------------------------------------------------------------------- |
| meta | object | YES | meta data that with the following keys `totalItems`, `currentPage` , `itemsPerPage` |
| meta.totalItems | number | YES | total number of rows to be paginated |
| meta.currentPage | number | YES | current page being viewed |
| meta.itemsPerPage | number | YES | number of items per page |
| options | object | YES | the paginator's options with the following keys `ulClassName`, `liClassName`, `activeClassName`, `disabledClassName` |
| options.ulClassName | string | YES | class name for the `ul` tag |
| options.liClassName | string | YES | class name for the `li` tag |
| options.activeClassName | string | YES | class name for the current page to be applied to the `li` tag |
| options.disabledClassName | string | YES | class name for the disabled links to be applied to the `li` tag |
| options.anchorClassName | string | NO | class name for the `a` tags |
| onPageChange | function | YES | the function that gets called when a page is clicked. It returns the `currentPage` as a number |
| firstComponent | component or string | NO | custom component for the link to the first page e.g "<<" |
| lastComponent | component or string | NO | custom component for the link to the last page e.g ">>" |
| prevComponent | component or string | NO | custom component for the link to the previous page e.g "<" |
| nextComponent | component or string | NO | custom component for the link to the next page e.g ">" |
| showFirst | boolean | NO | condition to show link to first page |
| showLast | boolean | NO | condition to show link to last page |
---
_Source: https://npm.io/package/sly-rc-paginator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._