react-format-number

Demonstration

Installation

Install with Bower

You can install and manage react-format-number using Bower:

bower install react-format-number --save

Install with npm

You can also install react-format-number using npm:

npm install react-format-number --save

Download manually

You can even download react-format-number from Github

Import

AMD

require.config({
    paths: {
        'jquery': 'bower_components/jquery/dist/jquery.min.js',
        'react': 'bower_components/react/react.min',
        'react-dom': 'bower_components/react/react-dom.min',
        'react-format-number': 'bower_components/react-format-number/dist/react-format-number.min'
    }
});

define(['react-format-number', 'react-dom', 'jquery'], function(FormatNumber, ReactDOM, $){
    //loaded
    var onChange = function(newValue){
        console.log('new value is: ', newValue);
    };
    ReactDOM.render(<FormatNumber fractionSize={ 3 } onChange={ onChange } value={ 100 }/>, $('#react-number')[0]);
});

CommonJS

var $ = require('jquery');
var ReactDOM = require('react-dom');
var FormatNumber = require('react-format-number');

var onChange = function(newValue){
    console.log('new value is: ', newValue);
};

ReactDOM.render(<FormatNumber fractionSize={ 3 } onChange={ onChange } value={ 100 }/>, $('#react-number')[0]);

Plain JavaScript

<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/react/react.min.js"></script>
<script type="text/javascript" src="bower_components/react/react-dom.min.js"></script>
<script type="text/javascript" src="bower_components/react-format-number/dist/react-format-number.min.js"></script>
<script type="text/javascript">

    var onChange = function(newValue){
        console.log('new value is: ', newValue);
    };

    ReactDOM.render(React.createElement(FormatNumber, {
        fractionSize: 2,
        onChange: onChange,
        value: 100
    }), $('#react-number')[0]);

</script>

Usage

var initValue = 10;
var inlineStyle = {
    color: 'red'
};

var valueChange = function(newValue){
    console.log('Value is changed, new value is: ', newValue);
};

React.render(<FormatNumber fractionSize={2} onChange={valueChange} value={initValue} style={ inlineStyle }/>, mountNode);

API

FormatNumber

Param	Type	Details
fractionSize	number	Number of decimal places to round the number to. If this is not provided then the fraction size is computed as 0 by default.
onChange	function	Function to be called opon change in the component
value	number	Initial value of component
style	object	An object to describe the style of component. The key is the camelCased version of the style name, and value is the style's value, usually a string