0.1.0 • Published 10 years ago

cs-react-pager v0.1.0

Weekly downloads
4
License
MIT
Repository
github
Last release
10 years ago

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

Properyvaluetypedefault
locale'zh', 'jp', 'en'string'zh'
total30number-
current1number1
gotoPagefunction-
limit10number10
size10number10
showTotalNumtruebooleanfalse
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
0.1.0

10 years ago

0.0.10

10 years ago

0.0.9

10 years ago

0.0.8

10 years ago

0.0.7

10 years ago

0.0.6

10 years ago

0.0.5

10 years ago

0.0.4

10 years ago

0.0.3

10 years ago

0.0.2

10 years ago

0.0.1

10 years ago