README
react-currency-input
An ES2015 react component for currency. Supports custom decimal and thousand separators as well as precision.
Changes
v1.3.0:
- Deprecated "onChange" option in favor of "onChangeEvent". This fixes the argument order to better match React's default input handling
- Updated dependencies to React 15
- Added parseFloat polyfill
- Persist events to deal with an issue of event pooling
- Other bug fixes.
Installation
npm install react-currency-input --save
Integration
You can store the value passed in to the change handler in your state.
import React from 'react'
import CurrencyInput from 'react-currency-input';
const MyApp = React.createClass({
getInitialState(){
return ({amount: "0.00"});
},
handleChange(event, maskedvalue, floatvalue){
this.setState({amount: maskedvalue});
},
render() {
return (
<div>
<CurrencyInput value={this.state.amount} onChangeEvent={this.handleChange}/>
</div>
);
}
});
export default MyApp
You can also assign a reference then access the value using a call to getMaskedValue().
import React from 'react'
import CurrencyInput from 'react-currency-input';
const MyApp = React.createClass({
handleSubmit(event){
event.preventDefault();
console.log(this.refs.myinput.getMaskedValue())
},
render() {
return (
<form onSubmit={this.handleSubmit}>
<CurrencyInput ref="myinput" />
</form>
);
}
});
export default MyApp
Separators and Precision
Specify custom decimal and thousand separators:
// 1.234.567,89
<CurrencyInput decimalSeparator="," thousandSeparator="." />
Specify a specific precision:
// 123,456.789
<CurrencyInput precision="3" />
// 123,456,789
<CurrencyInput precision="0" />
Currency
Optionally set a currency symbol as a prefix or suffix
// $1,234,567.89
<CurrencyInput prefix="