Wondering what’s next for npm?Check out our public roadmap! »

    react-decinc

    0.10.2 • Public • Published

    react-decinc

    Commitizen friendly XO code style

    NPM version Build Status Dependency Status DevDependency Status

    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

    Install

    npm i react-decinc

    DownloadsWeekly Downloads

    0

    Version

    0.10.2

    License

    MIT

    Last publish

    Collaborators

    • avatar