# cs-react-pager

> A simple react pagination component

Latest version **0.1.0** (published 2015-10-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install cs-react-pager
pnpm add cs-react-pager
yarn add cs-react-pager
bun add cs-react-pager
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2015-10-13 |
| First published | 2015-10-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Sam Chen |
| Maintainers | chenxsan |
| Keywords | react, react, component, pager, pagination |

## Links

- npm: https://www.npmjs.com/package/cs-react-pager
- Repository: https://github.com/chenxsan/pager
- Homepage: https://github.com/chenxsan/pager#readme
- Issues: https://github.com/chenxsan/pager/issues
- npm.io page: https://npm.io/package/cs-react-pager

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^0.14.0
- [react-dom](https://npm.io/package/react-dom.md) ^0.14.0
- [react-addons-test-utils](https://npm.io/package/react-addons-test-utils.md) ^0.14.0

## 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.1.0 (latest) — 2015-10-13
- 0.0.10 — 2015-10-08
- 0.0.9 — 2015-10-07
- 0.0.8 — 2015-10-07
- 0.0.7 — 2015-10-07
- 0.0.6 — 2015-10-07
- 0.0.5 — 2015-10-06
- 0.0.4 — 2015-10-06
- 0.0.3 — 2015-10-06
- 0.0.2 — 2015-10-05
- 0.0.1 — 2015-10-05

## README

## Usage

First, `npm install cs-react-pager --save` to install it from npm.

```
import Pager from 'cs-react-pager'
import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      current: 1
    }
    this.gotoPage = this.gotoPage.bind(this)
  }
  gotoPage (page) {
    this.setState({
      current: page
    })
  }
  render () {
    return (
      <Pager total={300} current={this.state.current} gotoPage={this.gotoPage} />
    )
  }
}
ReactDOM.render(
  <App />, document.getElementById('root')
)
```

## Properties

Propery | value | type | default
--- | --- | --- | ---
[locale] | 'zh', 'jp', 'en' | string | 'zh'
total | 30 | number | -
current | 1 | number | 1
gotoPage | | function | -
[limit] | 10 | number | 10
[size] | 10 | number | 10
[showTotalNum] | true | boolean | false
[styles] | - | object | -

## Custom styles

This component makes use of [CSS modules](https://github.com/css-modules/), so it's different if you wanna overide some styles.

**Warning**: Since css modules doesn't support extending styles for the time being, so what I make here is kind of a hack. Use it carefully.

```
import customStyles from './customStyles.css'

ReactDOM.render(
  <Pager styles={customStyles} />
  )
```
Say you don't like the `blue` link color, you wanna override it with 'red', then just define the new styles in `customStyles.css` file with the same class name:

```
.item > a {
  color: red;
}
```

## Test

Just run `npm test`, jest will handle all the dirty works.

## Demo

[demo here](http://chenxsan.github.io/pager/)

## Screenshot

![pagination](./screenshot.png)

## Browser support

Since it's using `display: flex`, so IE 10+。

## Todo

- [x] Publish to npm
- [x] Make style theme-able
- [x] i18n

## Developing

1. `npm install`
2. `npm start`

---
_Source: https://npm.io/package/cs-react-pager · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._