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, 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

Screenshot

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