react-decinc
React decrement/increment input component
Demo: vovanr.github.io/react-decinc
Install
npm install --save react-decinc Usage
See: example
class App extends React.Component { constructor() { super(); this.state = { count: 33, gramm: 0.15 }; this.handleChangeCount = this.handleChangeCount.bind(this); this.handleChangeGramm = this.handleChangeGramm.bind(this); } handleChangeCount(value) { this.setState({count: value}); } handleChangeGramm(value) { this.setState({gramm: value}); } render() { return ( <div style={{ fontSize: '500%', fontFamily: 'monospace' }} > <div> <label> <small>{'Count: '}</small> <DecInc className="dec-inc_theme_example" value={this.state.count} max={33} min={0} onChange={this.handleChangeCount} /> </label> </div> <div> <label> <small>{'Gramm: '}</small> <DecInc className="dec-inc_theme_example" value={this.state.gramm} min={0} step={0.001} onChange={this.handleChangeGramm} /> </label> </div> </div> ); } } ReactDOM.render(<App/>, document.getElementById('app'));Api
DecInc.propTypes = { value: React.PropTypes.number, min: React.PropTypes.number, max: React.PropTypes.number, step: React.PropTypes.number, disabled: React.PropTypes.bool, className: React.PropTypes.string, onChange: React.PropTypes.func }; DecInc.defaultProps = { step: 1, disabled: false };License
MIT © Vladimir Rodkin
