cs-react-pager

0.1.0 • Public • Published

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

pagination

Browser support

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

Todo

  • Publish to npm
  • Make style theme-able
  • i18n

Developing

  1. npm install
  2. npm start

Dependents (0)

Package Sidebar

Install

npm i cs-react-pager

Weekly Downloads

1

Version

0.1.0

License

MIT

Last publish

Collaborators

  • chenxsan