https://github.com/jsillitoe/react-currency-input
React component for inputing currency amounts
https://github.com/jsillitoe/react-currency-input
currency es6 javascript react
Last synced: 11 months ago
JSON representation
React component for inputing currency amounts
- Host: GitHub
- URL: https://github.com/jsillitoe/react-currency-input
- Owner: jsillitoe
- License: mit
- Created: 2016-06-15T17:23:50.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2024-07-22T03:49:43.000Z (over 1 year ago)
- Last Synced: 2025-05-09T15:04:36.960Z (11 months ago)
- Topics: currency, es6, javascript, react
- Language: JavaScript
- Size: 774 KB
- Stars: 203
- Watchers: 6
- Forks: 162
- Open Issues: 63
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-currency-input
An ES2015 react component for currency. Supports custom decimal and thousand separators as well as precision.
[](https://travis-ci.org/jsillitoe/react-currency-input)
## 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.
```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 (
);
}
});
export default MyApp
```
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 `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.