npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-currency-input-field

v3.8.0

Published

React <input/> component for formatting currency and numbers.

Downloads

737,073

Readme

React Currency Input Field Component

npm npm NPM Codecov Coverage Release build

Features

  • Allows abbreviations eg. 1k = 1,000 2.5m = 2,500,000
  • Prefix and Suffix options eg. £ or $
  • Automatically inserts group separator
  • Accepts Intl locale config
  • Can use arrow down/up to step
  • Can allow/disallow decimals
  • Written in TypeScript and has type support
  • Does not use any third party packages

Examples

Play with demo or view examples code

React Currency Input Demo

Install

npm install react-currency-input-field

or

yarn add react-currency-input-field

Usage

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

<CurrencyInput
  id="input-example"
  name="input-name"
  placeholder="Please enter a number"
  defaultValue={1000}
  decimalsLimit={2}
  onValueChange={(value, name, values) => console.log(value, name, values)}
/>;

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

Props

| Name | Type | Default | Description | | -------------------------------------------------- | ---------- | -------------- | ---------------------------------------------------------------------------------------------- | | allowDecimals | boolean | true | Allow decimals | | allowNegativeValue | boolean | true | Allow user to enter negative value | | defaultValue | number | | Default value | | value | number | | Programmatically set the value | | onValueChange | function | | Handle change in value | | placeholder | string | | Placeholder if no value | | decimalsLimit | number | 2 | Limit length of decimals allowed | | decimalScale | number | | Specify decimal scale for padding/trimming eg. 1.5 -> 1.50 or 1.234 -> 1.23 if decimal scale 2 | | fixedDecimalLength | number | | Value will always have the specified length of decimals | | prefix | string | | Include a prefix eg. £ or $ | | suffix | string | | Include a suffix eg. € or % | | decimalSeparator | string | locale default | Separator between integer part and fractional part of value | | groupSeparator | string | locale default | Separator between thousand, million and billion | | intlConfig | object | | International locale config | | disabled | boolean | false | Disabled | | disableAbbreviations | boolean | false | Disable abbreviations eg. 1k -> 1,000, 2m -> 2,000,000 | | disableGroupSeparators | boolean | false | Disable auto adding the group separator between values, eg. 1000 -> 1,000 | | maxLength | number | | Maximum characters the user can enter | | step | number | | Incremental value change on arrow down and arrow up key press | | transformRawValue | function | | Transform the raw value from the input before parsing. Needs to return string. |

onValueChange

Handle changes to the value.

onValueChange = (value, name, values) => void;

value

value will give you the value in a string format, without the prefix/suffix/separators.

Example: £123,456 -> 123456

name

name is the name you have passed to your component

values

values gives an object with three key values:

  • float: Value as float or null if empty. Example: "1.99" > 1.99
  • formatted: Value after applying formatting. Example: "1000000" > "1,000,0000"
  • value: Non formatted value as string, ie. same as first param.

Abbreviations

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

This can be turned off by passing in disableAbbreviations.

Prefix and Suffix

You can add a prefix or suffix by passing in prefix or suffix.

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

<CurrencyInput prefix="£" value={123} />;
// £123

<CurrencyInput suffix="%" value={456} />;
// 456%

Note: Passing in prefix/suffix will override the intl locale config.

Separators

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

Example:

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

<CurrencyInput 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 disableGroupSeparators={true}.

Intl Locale Config

This component can also accept international locale config to format the currency to locale setting.

Examples:

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

<CurrencyInput intlConfig={{ locale: 'en-US', currency: 'GBP' }} />;

<CurrencyInput intlConfig={{ locale: 'ja-JP', currency: 'JPY' }} />;

<CurrencyInput intlConfig={{ locale: 'en-IN', currency: 'INR' }} />;

locale should be a BCP 47 language tag, such as "en-US" or "en-IN".

currency should be a ISO 4217 currency code, such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB.

Any prefix, suffix, group separator and decimal separator options passed in will override the default locale settings.

Decimal Scale and Decimals Limit

decimalsLimit and decimalScale sound similar but have different usages.

decimalsLimit prevents the user from typing more than the limit, and decimalScale will format the decimals onBlur to the specified length, padding or trimming as necessary.

Example:

If decimalScale is 2

- 1.5 becomes 1.50 (padded)
- 1.234 becomes 1.23 (trimmed)

---

If decimalLimit is 2

- User enters 1.23
- User is then prevented from entering another value

Fixed Decimal Length

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

Format values for display

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';

// Format using prefix, groupSeparator and decimalSeparator
const formattedValue1 = formatValue({
  value: '123456',
  groupSeparator: ',',
  decimalSeparator: '.',
  prefix: '$',
});

console.log(formattedValue1);
// $123,456

// Format using intl locale config
const formattedValue2 = formatValue({
  value: '500000',
  intlConfig: { locale: 'en-IN', currency: 'INR' },
});

console.log(formattedValue2);
// ₹5,00,000

v3.0.0 Release Notes

Breaking Changes

  • :warning: onChange renamed to onValueChange :warning:
  • onBlurValue has been removed.
  • turnOffAbbreviations renamed to disableAbbreviations.
  • turnOffSeparators renamed to disableGroupSeparators.
  • precision renamed to decimalScale

Improvements in v3

  • Intl locale config can be passed in. Please note: formatting where the currency symbol is placed after the value like a suffix eg. (1 234,56 €) might cause problems, this is still in development.
  • Group separator will default to browser locale if not specified.
  • Can pass ref to the component.
  • onChange and onBlur functions can be passed in and will be called with original event.

Reasoning

As this component grew in usage, I started getting more bug reports and feature requests. That wasn't a problem though, because I was always happy to fix any bugs and implement any features if I could.

However, this meant sometimes I was a bit trigger happy, and didn't always think about how the different options interacted with each other. I found that it was getting a bit convoluted for my liking, and choices I had made earlier in development, now seemed like it could be improved.

Therefore, I took the opportunity of v3 to do a bit of tidying up for the component, in order to make it more future proof and intuitive to use.

I apologize if any of the changes cause new bugs or issues. Please let me know and I will fix asap.

Issues

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

Contributing

If you want to contribute to this repository, please refer to the contributing doc.