cm-apt-numeric-text-box

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