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

Name | Type | Default | Description --- | --- | --- | --- style | object | undefined | Applies style to the root element of the component className | string | undefined | Applies class to the root element of the component inputStyle | object | undefined | Applies style to the input box element of the component inputClassName | string | undefined | Applies class to the input box element of the component align | string : right or left or center | right | Aligns the floating number in respect with its container negationStyle | object | {color: '#d61a1a'} | Extending style of the input box incase the floating value is negative decimal | number | 2 | Number of digits to show after the decimal point commaFormatted | boolean | true | Should the value be formatted with commas onChange | function | undefined | (event: object) - Handling the event when the value of input box changes value | any | undefined | Sets the value of the input box defaultValue | any | undefined | Sets the default value of the input box at the time of initial rendering, doesnt have effect if used along with value prop. Use either one of them or none

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