Installations
npm install @metamorph/react-currency-input-fieldDeveloper Guide
Typescript
Yes
Module System
CommonJS
Node Version
16.14.2
NPM Version
8.5.0
Score
75.1
Supply Chain
98.7
Quality
75.4
Maintenance
100
Vulnerability
100
License
Releases
Contributors
Languages
TypeScript (96.89%)
HTML (1.82%)
JavaScript (1.19%)
Shell (0.11%)
Developer
cchanxzy
Download Statistics
Total Downloads
864
Last Day
2
Last Week
3
Last Month
20
Last Year
143
GitHub Statistics
706 Stars
309 Commits
126 Forks
6 Watching
4 Branches
21 Contributors
Bundle Size
9.46 kB
Minified
3.78 kB
Minified + Gzipped
Maintainers
Package Meta Information
Latest Version
3.7.0
Package Id
@metamorph/react-currency-input-field@3.7.0
Unpacked Size
277.38 kB
Size
53.41 kB
File Count
78
NPM Version
8.5.0
Node Version
16.14.2
Publised On
12 Feb 2023
Total Downloads
Cumulative downloads
Total Downloads
864
Last day
0%
2
Compared to previous day
Last week
-57.1%
3
Compared to previous week
Last month
150%
20
Compared to previous month
Last year
-73.8%
143
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
Dev Dependencies
37
React Currency Input Field Component
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.
:warning: Most important change is: onChange has been renamed to onValueChange
Examples
Play with demo or view examples code
Install
npm install react-currency-input-field
or
yarn add react-currency-input-field
Usage
1import CurrencyInput from 'react-currency-input-field'; 2 3<CurrencyInput 4 id="input-example" 5 name="input-name" 6 placeholder="Please enter a number" 7 defaultValue={1000} 8 decimalsLimit={2} 9 onValueChange={(value, name) => console.log(value, name)} 10/>;
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. |
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.
1import CurrencyInput from 'react-currency-input-field'; 2 3<CurrencyInput prefix="£" value={123} />; 4// £123 5 6<CurrencyInput suffix="%" value={456} />; 7// 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:
1import CurrencyInput from 'react-currency-input-field'; 2 3<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:
1import CurrencyInput from 'react-currency-input-field'; 2 3<CurrencyInput intlConfig={{ locale: 'en-US', currency: 'GBP' }} />; 4 5<CurrencyInput intlConfig={{ locale: 'ja-JP', currency: 'JPY' }} />; 6 7<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:
1If decimalScale is 2 2 3- 1.5 becomes 1.50 (padded) 4- 1.234 becomes 1.23 (trimmed) 5 6--- 7 8If decimalLimit is 2 9 10- User enters 1.23 11- 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 -> 1.00 2- 123 -> 1.23 3- 12.3 -> 12.30 4- 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.
1import { formatValue } from 'react-currency-input-field'; 2 3// Format using prefix, groupSeparator and decimalSeparator 4const formattedValue1 = formatValue({ 5 value: '123456', 6 groupSeparator: ',', 7 decimalSeparator: '.', 8 prefix: '$', 9}); 10 11console.log(formattedValue1); 12// $123,456 13 14// Format using intl locale config 15const formattedValue2 = formatValue({ 16 value: '500000', 17 intlConfig: { locale: 'en-IN', currency: 'INR' }, 18}); 19 20console.log(formattedValue2); 21// ₹5,00,000
v3.0.0 Release Notes
Breaking Changes
- :warning:
onChangerenamed toonValueChange:warning: onBlurValuehas been removed.turnOffAbbreviationsrenamed todisableAbbreviations.turnOffSeparatorsrenamed todisableGroupSeparators.precisionrenamed todecimalScale
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
refto the component. onChangeandonBlurfunctions 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
No vulnerabilities found.
Reason
no vulnerabilities detected
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: : LICENSE:1
Reason
no binaries found in the repo
Reason
dependency not pinned by hash detected -- score normalized to 7
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/AVVS/error-tojson/codeql-analysis.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:46: update your workflow using https://app.stepsecurity.io/secureworkflow/AVVS/error-tojson/codeql-analysis.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:57: update your workflow using https://app.stepsecurity.io/secureworkflow/AVVS/error-tojson/codeql-analysis.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:71: update your workflow using https://app.stepsecurity.io/secureworkflow/AVVS/error-tojson/codeql-analysis.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/examples.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/AVVS/error-tojson/examples.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/examples.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/AVVS/error-tojson/examples.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/examples.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/AVVS/error-tojson/examples.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/examples.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/AVVS/error-tojson/examples.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/AVVS/error-tojson/pr.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/AVVS/error-tojson/pr.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/AVVS/error-tojson/pr.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/AVVS/error-tojson/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/AVVS/error-tojson/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/AVVS/error-tojson/release.yml/master?enable=pin
- Info: Dockerfile dependencies are pinned
- Info: no insecure (not pinned by hash) dependency downloads found in Dockerfiles
- Info: no insecure (not pinned by hash) dependency downloads found in shell scripts
Reason
GitHub code reviews found for 16 commits out of the last 30 -- score normalized to 5
Details
- Warn: no reviews found for commit: cfe36efcb57b85281e2c016bd42febfd6ef21d5f
- Warn: no reviews found for commit: c63e3d8f44a03336c4ceffb8708b48b6b5af4e10
- Warn: no reviews found for commit: 1dfc138db8f9a6a04936ba2d27baa8f0536c46de
- Warn: no reviews found for commit: c3a6c24e77738892d0b849e4d8a698178b941c9f
- Warn: no reviews found for commit: 4ad10137dd1c3860f445f41c206e7db65636415a
Reason
branch protection is not maximal on development and all release branches
Details
- Info: 'force pushes' disabled on branch 'master'
- Info: 'allow deletion' disabled on branch 'master'
- Warn: no status checks found to merge onto branch 'master'
- Warn: number of required reviewers is only 0 on branch 'master'
Reason
0 commit(s) out of 30 and 0 issue activity out of 30 found in the last 90 days -- score normalized to 0
Reason
no badge detected
Reason
non read-only tokens detected in GitHub workflows
Details
- Warn: no topLevel permission defined: .github/workflows/codeql-analysis.yml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/AVVS/error-tojson/codeql-analysis.yml/master?enable=permissions
- Info: jobLevel 'actions' permission set to 'read': .github/workflows/codeql-analysis.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/AVVS/error-tojson/codeql-analysis.yml/master?enable=permissions
- Info: jobLevel 'contents' permission set to 'read': .github/workflows/codeql-analysis.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/AVVS/error-tojson/codeql-analysis.yml/master?enable=permissions
- Warn: no topLevel permission defined: .github/workflows/examples.yml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/AVVS/error-tojson/examples.yml/master?enable=permissions
- Warn: no topLevel permission defined: .github/workflows/pr.yml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/AVVS/error-tojson/pr.yml/master?enable=permissions
- Warn: no topLevel permission defined: .github/workflows/release.yml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/AVVS/error-tojson/release.yml/master?enable=permissions
Reason
project is not fuzzed
Reason
security policy file not detected
Score
4.9
/10
Last Scanned on 2022-08-15
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More