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="$" />

    // 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.