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.
; const MyApp = React;
You can also assign a reference then access the value using a call to getMaskedValue().
; const MyApp = React;
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="$" />
// 1,234,567.89 kr <CurrencyInput suffix=" kr" />
Negative signs come before the prefix
// -$20.00 <CurrencyInput prefix="$" value="-20.00" />
All other attributes are applied to the input element. For example, you can integrate bootstrap styling:
<CurrencyInput className="form-control" />
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 number 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 ) |
selectAllOnFocus | false | Selects all text on focus or does not |
prefix | '' | Currency prefix |
suffix | '' | Currency suffix |
autoFocus | false | Autofocus |
*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.