All Projects → cchanxzy → React Currency Input Field

cchanxzy / React Currency Input Field

Licence: mit
React component for an input field

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to React Currency Input Field

react-star-ratings
A customizable svg star rating component for selecting x stars or visualizing x stars
Stars: ✭ 128 (+15.32%)
Mutual labels:  input, react-component
React Code Input
React component for entering and validating PIN code.
Stars: ✭ 207 (+86.49%)
Mutual labels:  react-component, input
Tagify
🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue
Stars: ✭ 2,305 (+1976.58%)
Mutual labels:  react-component, input
insect
🛠 Highly customisable, minimalistic input x select field for React.
Stars: ✭ 33 (-70.27%)
Mutual labels:  input, react-component
react-simple-range
🔉 React slider component for inputting a numeric value within a range.
Stars: ✭ 20 (-81.98%)
Mutual labels:  input, react-component
react-ratings-declarative
A customizable rating component for selecting x widgets or visualizing x widgets
Stars: ✭ 41 (-63.06%)
Mutual labels:  input, react-component
React Intl Tel Input
Rewrite International Telephone Input in React.js. (Looking for maintainers, and PRs & contributors are also welcomed!)
Stars: ✭ 212 (+90.99%)
Mutual labels:  react-component, input
mighty-input
Text input for modern web
Stars: ✭ 20 (-81.98%)
Mutual labels:  input, react-component
React Telephone Input
React component for entering and validating international telephone numbers
Stars: ✭ 254 (+128.83%)
Mutual labels:  react-component, input
React Contextmenu
Project is no longer maintained
Stars: ✭ 1,361 (+1126.13%)
Mutual labels:  react-component
React Textarea Autosize
<textarea /> component for React which grows with content
Stars: ✭ 1,357 (+1122.52%)
Mutual labels:  react-component
React Native Swipeable Parallax Carousel
React Native Swipeable Parallax Carousel
Stars: ✭ 98 (-11.71%)
Mutual labels:  react-component
Suohai
Audio input/output source lock/switcher for macOS.
Stars: ✭ 100 (-9.91%)
Mutual labels:  input
Vue Places
Places component is based on places.js for Vue 2.x. Turn any <input> into an address autocomplete.
Stars: ✭ 106 (-4.5%)
Mutual labels:  input
Jhform
JhForm - 自定义表单工具,更加简单,快捷的创建表单、设置页面
Stars: ✭ 108 (-2.7%)
Mutual labels:  input
React Css Component
Injecting CSS via React Components
Stars: ✭ 98 (-11.71%)
Mutual labels:  react-component
React Cassette Player
Simple ReactJS HTML5 audio player component built with SVG icons from The Noun Project.
Stars: ✭ 93 (-16.22%)
Mutual labels:  react-component
React Multi Select
A Multi Select component built with and for React
Stars: ✭ 111 (+0%)
Mutual labels:  react-component
React Color
🎨 Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more
Stars: ✭ 10,287 (+9167.57%)
Mutual labels:  react-component
React Native Segmented Text Input
A wickedly customizable <TextInput /> for React Native. Useful for tags, spellchecking, whatever.
Stars: ✭ 104 (-6.31%)
Mutual labels:  input

React Currency Input Field Component

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

Migrating to v3.0.0

There are a number of breaking changes in v3.0.0, please read the release notes if migrating from v2 to v3.

⚠️ Most important change is: onChange has been renamed to onValueChange

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) => console.log(value, name)}
/>;

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

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.

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

Decimal Scale and Decimals Limit

decimalsLimit and decimalScale are similar, the difference is 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 decimal scale 2: 1.5 becomes 1.50 and 1.234 becomes 1.23

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

  • ⚠️ onChange renamed to onValueChange ⚠️
  • 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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].