npmpackage.info

Gathering detailed insights and metrics for react-currency-input-field-fork

Other packages similar to react-currency-input-field-fork

react-currency-input-field-forker

3.9.0

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

Gathering detailed insights and metrics for react-currency-input-field-fork

react-currency-input-field-fork - 3.6.5 | npmpackage.info

react-currency-input-field-fork

React component for an input field

3.6.5

743

MIT

TypeScript

305.62 kB

4.9

Installations

npm install react-currency-input-field-fork

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

14.19.0

NPM Version

6.14.16 Pull Requests

Open

1

Total

227

Closed

55

Merged

171

Issues

Open

2

Total

166

Closed

164

Releases

v4.0.0-alpha.3

Updated on Feb 22, 2025

v3.10.0

Updated on Feb 22, 2025

v3.9.2

Updated on Feb 22, 2025

v3.9.1

Updated on Feb 22, 2025

v4.0.0-alpha.2

Updated on Nov 12, 2024

v3.9.0

Updated on Nov 12, 2024

View All 94 releases

Languages

TypeScript

HTML

JavaScript

Shell

TypeScript (96.97%)

HTML (1.77%)

JavaScript (1.16%)

Shell (0.1%)

Developer

cchanxzy

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

743 Stars

316 Commits

134 Forks

6 Watchers

4 Branches

24 Contributors

Updated on Jul 10, 2025

Maintainers

View All 24 Contributors

Package Meta Information

Latest Version

3.6.5

Package Id

react-currency-input-field-fork@3.6.5

Unpacked Size

305.62 kB

Size

60.09 kB

File Count

NPM Version

6.14.16

Node Version

14.19.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

React Currency Input Field Component

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

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: 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

No vulnerabilities found.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

7

Pinned-Dependencies

Determines if the project has declared and pinned its dependencies.

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

5

Code-Review

Determines if the project requires code review before pull requests (aka merge requests) are merged.

3

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has a CII Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Fuzzing

Determines if the project uses fuzzing.

0

Security-Policy

Determines if the project has published a security policy.

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

Other packages similar to react-currency-input-field-fork

Other packages similar to react-currency-input-field-fork

react-currency-input-field-fork

Installations

Developer Guide

Yes

CommonJS

14.19.0

6.14.16

Pull Requests

1

227

55

171

Issues

2

166

164

Releases

Languages

Developer

cchanxzy

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

React Currency Input Field Component

Features

Migrating to v3.0.0

Examples

Install

Usage

Props

Abbreviations

Prefix and Suffix

Separators

Intl Locale Config

Decimal Scale and Decimals Limit

Fixed Decimal Length

Format values for display

v3.0.0 Release Notes

Breaking Changes

Improvements in v3

Reasoning

Issues

10

10

10

10

7

5

3

0

0

0

0

0

4.9

/10