react-format-number

<!DOCTYPE html> <html lang="en"> <head> <title>React-format-number</title> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="yes"/> <meta name="renderer" content="webkit"/> <meta http-equiv="Cache-Control" content="no-siteapp" /> <link rel="icon" type="image/png" href="img/favicon.ico"> <link rel="stylesheet" href="libs/prism.css"> <link rel="stylesheet" type="text/css" href="libs/css/materialize.min.css"> <link rel="stylesheet" type="text/css" href="libs/fonticon/css/github.css"> <link rel="stylesheet" type="text/css" href="libs/tooltipster.min.css"> <link rel="stylesheet" type="text/css" href="demo.css"> </head> <body> <div class="light-green darken-3 valign-wrapper"> <div class="valign center" style="width: 100%;"> <h1 class="white-text">react-format-number</h1> <a class="btn-floating waves-effect waves-light btn-large blue-grey darken-2 tooltip" href="https://github.com/leftstick/react-format-number" title="View On Github"> <i class="icon-github"></i> </a> <p class="white-text">A formatted number input component can be used easily for developers</p> </div> </div> <div class="container"> <h4>Demonstration</h4> <br/> <div class="row"> <div class="input-field col s12 m6"> <i class="material-icons prefix">dialpad</i> <div id="react-number" style="margin-left: 45px;"></div>  <label for="number">Format Number</label> </div> <div class="input-field col s12 m6"> <i class="material-icons prefix">info</i> <input id="value" type="text" disabled="" style="color: #000;"> <label for="value"></label> </div> <div class="col s12 m6"> <span>Fraction Size: </span> <input name="decimal" type="radio" id="0-v" checked="" value="0"/> <label for="0-v">0</label> <input name="decimal" type="radio" id="1-v" value="1"/> <label for="1-v">1</label> <input name="decimal" type="radio" id="2-v" value="2"/> <label for="2-v">2</label> <input name="decimal" type="radio" id="3-v" value="3"/> <label for="3-v">3</label> </div> </div> <br/> <h4>Installation</h4> <br/> <h5 class="title">Install with Bower</h5> <p>You can install and manage <code class="snippet">react-format-number</code> using <a href="http://bower.io/">Bower</a>:</p> <pre class="line-numbers"><code class="language-bash"> bower install react-format-number --save</code></pre> <br/> <h5 class="title">Install with npm</h5> <p>You can also install <code class="snippet">react-format-number</code> using <a href="https://www.npmjs.com/package/react-format-number">npm</a>:</p> <pre class="line-numbers"><code class="language-bash"> npm install react-format-number --save</code></pre> <br/> <h5 class="title">Download manually</h5> <p>You can even download <code class="snippet">react-format-number</code> from <a href="https://github.com/leftstick/react-format-number/zipball/master">Github</a></p> <br/> <h4>Import</h4> <br/> <h5 class="title">AMD</h5> <pre class="line-numbers"><code class="language-jsx"> 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]); });</code></pre> <br/> <h5 class="title">CommonJS</h5> <pre class="line-numbers"><code class="language-jsx"> 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]);</code></pre> <br/> <h5 class="title">Plain JavaScript</h5> <pre class="line-numbers"><code class="language-markup"> <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></code></pre> <br/> <h4>Usage</h4> <br/> <pre class="line-numbers"><code class="language-jsx"> 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);</code></pre> <br/> <h4>API</h4> <br/> <h5 class="title">FormatNumber</h5> <br/> <table class="bordered striped hoverable"> <thead> <tr> <th>Param</th> <th>Type</th> <th>Details</th> </tr> </thead> <tbody> <tr> <td>fractionSize</td> <td><span class="number-type">number</span></td> <td>Number of decimal places to round the number to. If this is not provided then the fraction size is computed as 0 by default.</td> </tr> <tr> <td>onChange</td> <td><span class="function-type">function</span></td> <td>Function to be called opon change in the component</td> </tr> <tr> <td>value</td> <td><span class="number-type">number</span></td> <td>Initial value of component</td> </tr> <tr> <td>style</td> <td><span class="object-type">object</span></td> <td>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</td> </tr> </tbody> </table> <br/> </div> <footer class="footer"> <p>© 2014 Licensed under <a href="http://opensource.org/licenses/MIT" target="_blank">MIT license</a>. by <a href="http://leftstick.github.io/" target="_blank">Howard.Zuo</a>.</p> </footer> <script type="text/javascript" src="http://libs.cdnjs.net/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="http://libs.cdnjs.net/tooltipster/3.3.0/js/jquery.tooltipster.min.js"></script> <script type="text/javascript" src="http://libs.cdnjs.net/materialize/0.97.5/js/materialize.min.js"></script> <script type="text/javascript" src="http://libs.cdnjs.net/react/0.14.3/react.min.js"></script> <script type="text/javascript" src="http://libs.cdnjs.net/react/0.14.3/react-dom.min.js"></script> <script type="text/javascript" src="libs/prism.js"></script> <script type="text/javascript" src="FormatNumber.js"></script> <script type="text/javascript" src="demo.js"></script> <script type="text/javascript"> $('.tooltip').tooltipster(); </script> </body> </html>