A simple react pagination component
npm install cs-react-pagerFirst, 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 (
)
}
}
ReactDOM.render(
)
`
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 | -
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(
)
`
Say you don't like the 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;
}
Just run npm test, jest will handle all the dirty works.
Since it's using display: flex, so IE 10+。
- [x] Publish to npm
- [x] Make style theme-able
- [x] i18n
1. npm install
2.