React component for inputting currency amounts
npm install @ericblade/react-currency-input
Modern React component for currency input. Fork from https://github.com/jsillitoe/react-currency-input
Supports custom decimal and thousand separators as well as precision.
Uniquely formats while inputting, including decimal and thousands separators, precision, prefixes and suffixes. I have not found any other currency inputs that do this, and the original hasn't been touched for quite a long time, so that is why I fork this.
- Now in TypeScript
- Supports React 17, 18
- Totally new automated testing setup with ~~Cypress~~ Playwright (new in 1.4.2+)
- Automated Testing setup much more thorough
- Caret selection redone and seems to work everywhere
- Uses react-device-detect to workaround issues with Gboard
There is a CodePen available which you may use to see the component in action, and play with all of it's various parameters to see how it works. It is written with React and TypeScript.
Codepen Link
There is a second CodePen, which mirrors the demonstration application in the "examples" directory here in the source: Codepen Link
- 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.
``bash`
npm install @ericblade/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 '@ericblade/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 '@ericblade/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
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.