React component for inputing currency amounts
npm install react-currency-inputAn ES2015 react component for currency. Supports custom decimal and thousand separators as well as precision.
- 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.
``
npm install react-currency-input --save
You can store the value passed in to the change handler in your state.
`javascript
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 (
You can also assign a reference then access the value using a call to getMaskedValue().
javascript
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 (
);
}
});
export default MyApp
`Separators and Precision
Specify custom decimal and thousand separators:
javascript
// 1.234.567,89
`Specify a specific precision:
javascript
// 123,456.789
`javascript
// 123,456,789
`Currency
Optionally set a currency symbol as a prefix or suffix
javascript
// $1,234,567.89
`javascript
// 1,234,567.89 kr
`Negative signs come before the prefix
javascript
// -$20.00
`All other attributes are applied to the input element. For example, you can integrate bootstrap styling:
javascript
`Options
Option | Default Value | Description
----------------- | ------------- | -----------------------------------------------------------------------------
value | 0 | The initial currency value
onChange | n/a | Callback function to handle value changes. Deprecated, use onChangeEvent.
onChangeEvent | n/a | Callback function to handle value changes
precision | 2 | Number of digits after the decimal separator
decimalSeparator | '.' | The decimal separator
thousandSeparator | ',' | The thousand separator
inputType | "text" | Input field tag type. You may want to use
or tel*
allowNegative | false | Allows negative numbers in the input
allowEmpty | false | If no value is given, defines if it starts as null (true) or '' (false`)*Note: Enabling any mask-related features such as prefix, suffix or separators with an inputType="number" or "tel" could trigger errors. Most of those characters would be invalid in such input types.