• Allows abbreviations eg. 1k = 1,000 2.5m = 2,500,000
• Prefix option eg. £ or $
• Can allow/disallow decimals
• Automatically inserts comma separator
• Only allows valid numbers
• Lightweight and simple

Play with demo or view examples code

npm install react-currency-input-field

or

yarn add react-currency-input-field

import CurrencyInput from 'react-currency-input-field';

<CurrencyInput
  id="input-example"
  name="input-name"
  placeholder="£1,000"
  defaultValue={1000}
  allowDecimals={true}
  decimalsLimit={2}
  onChange={(value, name) => console.log(value, name)}
/>;

Have a look in src/examples for more examples on implementing and validation.

It can parse values with abbreviations k, m and b

Examples:

• 1k = 1,000
• 2.5m = 2,500,000
• 3.456B = 3,456,000,000

You can change the decimal and group separators by passing in decimalSeparator and groupSeparator.

Example:

import CurrencyInput from 'react-currency-input-field';

<CurrencyInput
  id="input-example"
  defaultValue="123.456,89"
  decimalSeparator=","
  groupSeparator="."
/>;

Note: the separators cannot be a number, and decimalSeparator must be different to groupSeparator.

To turn off auto adding the group separator, add turnOffSeparators={true}.

Use fixedDecimalLength so that the value will always have the specified length of decimals. This formatting happens onBlur.

Example if fixedDecimalLength was 2:

- 1 -> 1.00
- 123 -> 1.23
- 12.3 -> 12.30
- 12.34 -> 12.34

Use the formatValue function to format the values to a more user friendly string. This is useful if you are displaying the value somewhere else ie. the total of multiple inputs.

import { formatValue } from 'react-currency-input-field';

const formattedValue = formatValue({
  value = 123456,
  groupSeparator = ',',
  decimalSeparator = '.',
  turnOffSeparators = false,
  prefix = '$',
});

Feel free to raise an issue on Github if you find a bug or have a feature request