cm-apt-numeric-text-box v0.0.4

Apptudio Numeric Text Box

An input box to present floating numeric values.

Usage

import React, { Component } from 'react';
import NumericInput from 'cm-apt-numeric-text-box';

export default class App extends Component {
    constructor (props) {
        super(props);

        this.state = {
            value: ''
        }
    }

  	render() {
        var stateObj = this.state;

    	return (
            <div>
                <NumericInput
                    ref='numeric-input'
                    style={{
                        maxWidth: '500px'
                    }}
                    inputClassName='form-control' // Enables bootstrap form input class
                    defaultValue={80.22} // Sets the default value when this component gets mounted for the first time, doesnt work if `value` property is already set
                    value={stateObj.value} // Sets the value
                    onChange={(e) => {
                        this.setState({
                            value: e.target.value
                        })
                    }}
                    />
            </div>
    	);
  	}
}

Data Getter (manual purpose)

this.refs['numeric-input'].getValue(); // Returns the original input value in the box
this.refs['numeric-input'].getValue(true); // Returns the floating numeric value equivalent to the value in the box

Data Setter (manual purpose)

this.refs['numeric-input'].setValue('123.23');
this.refs['numeric-input'].setValue(123.23);

Props

Test

npm install
npm start
open http://localhost:1401

Now edit test/App.js.

Dependencies

(In case experimentation is desired)

• React
• Webpack
• webpack-dev-server
• babel-loader
• react-hot-loader