{"id":22624088,"url":"https://github.com/cchanxzy/react-currency-input-field","last_synced_at":"2026-04-01T17:13:53.350Z","repository":{"id":37550129,"uuid":"150985826","full_name":"cchanxzy/react-currency-input-field","owner":"cchanxzy","description":"React component for an input field","archived":false,"fork":false,"pushed_at":"2026-03-17T08:33:49.000Z","size":6921,"stargazers_count":800,"open_issues_count":8,"forks_count":139,"subscribers_count":5,"default_branch":"main","last_synced_at":"2026-03-17T23:04:01.273Z","etag":null,"topics":["input","react","react-component","typescript"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cchanxzy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"docs/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":"docs/SUPPORT.md","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["cchanxzy"]}},"created_at":"2018-09-30T16:46:24.000Z","updated_at":"2026-03-17T08:33:25.000Z","dependencies_parsed_at":"2024-06-16T21:42:17.606Z","dependency_job_id":"cdb5b01c-e0d6-4811-9357-2990c8b8d582","html_url":"https://github.com/cchanxzy/react-currency-input-field","commit_stats":{"total_commits":261,"total_committers":20,"mean_commits":13.05,"dds":0.6934865900383143,"last_synced_commit":"cf30c7cc8f17b0a30ab10a84f8e1acae7f28d81d"},"previous_names":[],"tags_count":110,"template":false,"template_full_name":null,"purl":"pkg:github/cchanxzy/react-currency-input-field","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cchanxzy%2Freact-currency-input-field","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cchanxzy%2Freact-currency-input-field/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cchanxzy%2Freact-currency-input-field/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cchanxzy%2Freact-currency-input-field/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cchanxzy","download_url":"https://codeload.github.com/cchanxzy/react-currency-input-field/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cchanxzy%2Freact-currency-input-field/sbom","scorecard":{"id":269108,"data":{"date":"2022-08-15","repo":{"name":"github.com/cchanxzy/react-currency-input-field","commit":"d7c63d5f5398f30d37f3480129c8775a28d03f2e"},"scorecard":{"version":"v4.5.0-17-g7772984","commit":"777298477c07c262a4ec7e95ceee839b7b3b75ae"},"score":4.9,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) out of 30 and 0 issue activity out of 30 found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#maintained"}},{"name":"Code-Review","score":5,"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"],"documentation":{"short":"Determines if the project requires code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#code-review"}},{"name":"CII-Best-Practices","score":0,"reason":"no badge detected","details":null,"documentation":{"short":"Determines if the project has a CII Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#cii-best-practices"}},{"name":"Vulnerabilities","score":10,"reason":"no vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#vulnerabilities"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"no published package detected","details":["Warn: no GitHub publishing workflow detected"],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":0,"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"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#token-permissions"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: : LICENSE:1"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#license"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":7,"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"],"documentation":{"short":"Determines if the project has declared and pinned its dependencies.","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#pinned-dependencies"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":["Warn: no GitHub releases found"],"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#signed-releases"}},{"name":"Dependency-Update-Tool","score":-1,"reason":"internal error: Search.Code: GET https://api.github.com/search/commits?per_page=100\u0026q=repo%3Acchanxzy%2Freact-currency-input-field+author%3Adependabot%5Bbot%5D: 400  []","details":null,"documentation":{"short":"Determines if the project uses a dependency update tool.","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#dependency-update-tool"}},{"name":"Branch-Protection","score":3,"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'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#branch-protection"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":null,"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#fuzzing"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":null,"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/777298477c07c262a4ec7e95ceee839b7b3b75ae/docs/checks.md#security-policy"}}]},"last_synced_at":"2025-08-17T12:54:35.751Z","repository_id":37550129,"created_at":"2025-08-17T12:54:35.752Z","updated_at":"2025-08-17T12:54:35.752Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31290538,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-01T13:12:26.723Z","status":"ssl_error","status_checked_at":"2026-04-01T13:12:25.102Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["input","react","react-component","typescript"],"created_at":"2024-12-09T00:10:09.173Z","updated_at":"2026-04-01T17:13:53.344Z","avatar_url":"https://github.com/cchanxzy.png","language":"TypeScript","funding_links":["https://github.com/sponsors/cchanxzy"],"categories":["TypeScript"],"sub_categories":[],"readme":"# React Currency Input Field Component\n\n[![npm](https://img.shields.io/npm/v/react-currency-input-field)](https://www.npmjs.com/package/react-currency-input-field) [![npm](https://img.shields.io/npm/dm/react-currency-input-field)](https://www.npmjs.com/package/react-currency-input-field)\n[![NPM](https://img.shields.io/npm/l/react-currency-input-field)](https://www.npmjs.com/package/react-currency-input-field) [![Codecov Coverage](https://img.shields.io/codecov/c/github/cchanxzy/react-currency-input-field)](https://codecov.io/gh/cchanxzy/react-currency-input-field/) [![Release build](https://github.com/cchanxzy/react-currency-input-field/workflows/Release/badge.svg)](https://github.com/cchanxzy/react-currency-input-field/actions?query=workflow%3ARelease)\n\n- [React Currency Input Field Component](#react-currency-input-field-component)\n  - [Features](#features)\n  - [Examples](#examples)\n  - [Install](#install)\n  - [Usage](#usage)\n  - [Props](#props)\n    - [onValueChange](#onvaluechange)\n      - [value](#value)\n      - [name](#name)\n      - [values](#values)\n    - [Abbreviations](#abbreviations)\n    - [Prefix and Suffix](#prefix-and-suffix)\n    - [Separators](#separators)\n    - [Intl Locale Config](#intl-locale-config)\n    - [Decimal Scale and Decimals Limit](#decimal-scale-and-decimals-limit)\n    - [Fixed Decimal Length](#fixed-decimal-length)\n  - [Format values for display](#format-values-for-display)\n  - [Issues](#issues)\n  - [Contributing](#contributing)\n  - [Support this Project](#support-this-project)\n  - [v4.0.0 Announcement](#v400-announcement)\n\n## Features\n\n- Supports [abbreviations](#abbreviations) (e.g. `1k` → `1,000`, `2.5m` → `2,500,000`)\n- Prefix and suffix support (e.g. `£`, `$`)\n- Automatically inserts [group separators](#separators)\n- Accepts [Intl locale config](#intl-locale-config)\n- Keyboard stepping with `ArrowUp` / `ArrowDown`\n- Can allow/disallow decimals\n- Written in TypeScript and has type support\n- Zero runtime dependencies (ie. does not depend on any third party packages except for development)\n- Bundle size [7.6kB (Minified), 3.1kB (Minified + Gzipped)](https://bundlephobia.com/package/react-currency-input-field@4.0.0)\n\n## Examples\n\n[Play with demo](https://cchanxzy.github.io/react-currency-input-field) or view [examples code](https://github.com/cchanxzy/react-currency-input-field/blob/main/src/examples)\n\n[![React Currency Input Demo](demo/demo.gif)](https://cchanxzy.github.io/react-currency-input-field)\n\n## Install\n\n```bash\nnpm install react-currency-input-field\n\nyarn add react-currency-input-field\n\npnpm add react-currency-input-field\n```\n\n## Usage\n\n```js\nimport CurrencyInput from 'react-currency-input-field';\n\n\u003cCurrencyInput\n  id=\"input-example\"\n  name=\"input-name\"\n  placeholder=\"Please enter a number\"\n  defaultValue={1000}\n  decimalsLimit={2}\n  onValueChange={(value, name, values) =\u003e console.log(value, name, values)}\n/\u003e;\n```\n\nSee [`src/examples`](https://github.com/cchanxzy/react-currency-input-field/tree/main/src/examples) for more patterns covering implementation details and validation helpers.\n\n## Props\n\n| Name                                               | Type                | Default        | Description                                                                                                  |\n| -------------------------------------------------- | ------------------- | -------------- | ------------------------------------------------------------------------------------------------------------ |\n| allowDecimals                                      | `boolean`           | `true`         | Allow entering decimal values.                                                                               |\n| allowNegativeValue                                 | `boolean`           | `true`         | Allow the user to enter negative numbers.                                                                    |\n| className                                          | `string`            |                | Additional CSS class names for the rendered input.                                                           |\n| customInput                                        | `React.ElementType` | `input`        | Render a custom component instead of the native `input`.                                                     |\n| [decimalsLimit](#decimal-scale-and-decimals-limit) | `number`            | `2`            | Maximum number of fractional digits the user can type.                                                       |\n| [decimalScale](#decimal-scale-and-decimals-limit)  | `number`            |                | Pads or trims decimals on blur to the specified length.                                                      |\n| [decimalSeparator](#separators)                    | `string`            | locale default | Character used to separate the integer and fractional parts. Cannot be numeric or match the group separator. |\n| defaultValue                                       | `number \\| string`  |                | Initial value when the component is uncontrolled.                                                            |\n| value                                              | `number \\| string`  |                | Controlled value supplied by the parent component.                                                           |\n| disabled                                           | `boolean`           | `false`        | Disable user interaction.                                                                                    |\n| disableAbbreviations                               | `boolean`           | `false`        | Disable shorthand parsing (`1k`, `2m`, `3b`, etc.).                                                          |\n| [disableGroupSeparators](#separators)              | `boolean`           | `false`        | Prevent automatic insertion of group separators (e.g. keep `1000` instead of `1,000`).                       |\n| [fixedDecimalLength](#fixed-decimal-length)        | `number`            |                | Forces the value to always display with the specified number of decimals on blur.                            |\n| formatValueOnBlur                                  | `boolean`           | `true`         | When set to `false`, the `onValueChange` will not be called on `blur` events.                                |\n| [groupSeparator](#separators)                      | `string`            | locale default | Character used to group thousands. Cannot be numeric.                                                        |\n| id                                                 | `string`            |                | Forwarded to the rendered input element.                                                                     |\n| [intlConfig](#intl-locale-config)                  | `IntlConfig`        |                | Locale configuration for `Intl.NumberFormat` (locale, currency, style).                                      |\n| maxLength                                          | `number`            |                | Maximum number of characters (excluding the negative sign) the user can enter.                               |\n| [onValueChange](#onvaluechange)                    | `function`          |                | Handler fired whenever the parsed value changes.                                                             |\n| placeholder                                        | `string`            |                | Displayed when there is no value.                                                                            |\n| [prefix](#prefix-and-suffix)                       | `string`            |                | String added before the value (e.g. `£`, `$`). Overrides locale-derived prefixes.                            |\n| [suffix](#prefix-and-suffix)                       | `string`            |                | String added after the value (e.g. `%`, `€`). Overrides locale-derived suffixes.                             |\n| step                                               | `number`            |                | Increment applied when pressing `ArrowUp` / `ArrowDown`.                                                     |\n| transformRawValue                                  | `function`          |                | Intercept and adjust the raw input string before parsing. Must return a string.                              |\n\n### onValueChange\n\nHandle changes to the value.\n\n```js\nonValueChange = (value, name, values) =\u003e void;\n```\n\n#### value\n\n`value` will give you the value in a string format, without the prefix/suffix/separators.\n\nUseful for displaying the value, but you can use `values.float` if you need the numerical value for calculations.\n\nExample: `£123,456 -\u003e 123456`\n\n#### name\n\n`name` is the name you have passed to your component\n\n#### values\n\n`values` gives an object with three key values:\n\n- `float`: Value as float or null if empty. Example: \"1.99\" \u003e 1.99\n- `formatted`: Value after applying formatting. Example: \"1000000\" \u003e \"1,000,0000\"\n- `value`: Non formatted value as string, ie. same as first param.\n\n### Abbreviations\n\nIt can parse values with abbreviations `k`, `m` and `b`\n\nExamples:\n\n- 1k = 1,000\n- 2.5m = 2,500,000\n- 3.456B = 3,456,000,000\n\nThis can be turned off by passing in `disableAbbreviations={true}`.\n\n### Prefix and Suffix\n\nYou can add a prefix or suffix by passing in `prefix` or `suffix`.\n\n```js\nimport CurrencyInput from 'react-currency-input-field';\n\n\u003cCurrencyInput prefix=\"£\" value={123} /\u003e;\n// £123\n\n\u003cCurrencyInput suffix=\"%\" value={456} /\u003e;\n// 456%\n```\n\nNote: Passing in prefix/suffix will override the intl locale config.\n\n### Separators\n\nYou can change the decimal and group separators by passing in `decimalSeparator` and `groupSeparator`.\n\nExample:\n\n```js\nimport CurrencyInput from 'react-currency-input-field';\n\n\u003cCurrencyInput decimalSeparator=\",\" groupSeparator=\".\" /\u003e;\n```\n\nNote: the separators cannot be a number, and `decimalSeparator` must be different to `groupSeparator`.\n\nTo turn off auto adding the group separator, add `disableGroupSeparators={true}`.\n\n### Intl Locale Config\n\nThis component can also accept international locale config to format the currency to locale setting.\n\nExamples:\n\n```javascript\nimport CurrencyInput from 'react-currency-input-field';\n\n// US Dollar\n\u003cCurrencyInput intlConfig={{ locale: 'en-US', currency: 'USD' }} /\u003e\n\n// British Pound\n\u003cCurrencyInput intlConfig={{ locale: 'en-GB', currency: 'GBP' }} /\u003e\n\n// Canadian Dollar\n\u003cCurrencyInput intlConfig={{ locale: 'en-CA', currency: 'CAD' }} /\u003e\n\n// Australian Dollar\n\u003cCurrencyInput intlConfig={{ locale: 'en-AU', currency: 'AUD' }} /\u003e\n\n// Japanese Yen\n\u003cCurrencyInput intlConfig={{ locale: 'ja-JP', currency: 'JPY' }} /\u003e\n\n// Chinese Yuan\n\u003cCurrencyInput intlConfig={{ locale: 'zh-CN', currency: 'CNY' }} /\u003e\n\n// Euro (Germany)\n\u003cCurrencyInput intlConfig={{ locale: 'de-DE', currency: 'EUR' }} /\u003e\n\n// Euro (France)\n\u003cCurrencyInput intlConfig={{ locale: 'fr-FR', currency: 'EUR' }} /\u003e\n\n// Indian Rupee\n\u003cCurrencyInput intlConfig={{ locale: 'hi-IN', currency: 'INR' }} /\u003e\n\n// Brazilian Real\n\u003cCurrencyInput intlConfig={{ locale: 'pt-BR', currency: 'BRL' }} /\u003e\n\n```\n\n`locale` should be a [BCP 47 language tag](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation), such as \"en-US\" or \"en-IN\".\n\n`currency` should be a [ISO 4217 currency code](https://en.wikipedia.org/wiki/ISO_4217), such as \"USD\" for the US dollar, \"EUR\" for the euro, or \"CNY\" for the Chinese RMB.\n\nAny prefix, suffix, group separator and decimal separator options passed in will override the default locale settings.\n\n### Decimal Scale and Decimals Limit\n\n`decimalsLimit` and `decimalScale` sound similar but have different usages.\n\n`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.\n\nExample:\n\n```md\nIf decimalScale is 2\n\n- 1.5 becomes 1.50 (padded)\n- 1.234 becomes 1.23 (trimmed)\n\n---\n\nIf decimalLimit is 2\n\n- User enters 1.23\n- User is then prevented from entering another value\n```\n\n### Fixed Decimal Length\n\nUse `fixedDecimalLength` so that the value will always have the specified length of decimals.\n\nThis formatting happens onBlur.\n\nExample if `fixedDecimalLength` was 2:\n\n```md\n- 1 -\u003e 1.00\n- 123 -\u003e 1.23\n- 12.3 -\u003e 12.30\n- 12.34 -\u003e 12.34\n```\n\n## Format values for display\n\nUse 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.\n\n```javascript\nimport { formatValue } from 'react-currency-input-field';\n\n// Format using prefix, groupSeparator and decimalSeparator\nconst formattedValue1 = formatValue({\n  value: '123456',\n  groupSeparator: ',',\n  decimalSeparator: '.',\n  prefix: '$',\n});\n\nconsole.log(formattedValue1);\n// $123,456\n\n// Format using intl locale config\nconst formattedValue2 = formatValue({\n  value: '500000',\n  intlConfig: { locale: 'hi-IN', currency: 'INR' },\n});\n\nconsole.log(formattedValue2);\n// ₹5,00,000\n```\n\n## Issues\n\nFeel free to raise an issue on Github if you find a bug or have a feature request.\n\n## Contributing\n\nIf you would like to contribute to this repository, please refer to the [contributing doc](https://github.com/cchanxzy/react-currency-input-field/blob/main/docs/CONTRIBUTING.md).\n\n## Support this Project\n\nIf you'd like to support this project, please refer to the [support doc](https://github.com/cchanxzy/react-currency-input-field/blob/main/docs/SUPPORT.md).\n\n## v4.0.0 Announcement\n\nI'm excited to announce the release of **[v4.0.0](https://www.npmjs.com/package/react-currency-input-field/v/4.0.0)**.\n\nThis marks the beginning of development for version 4.0.0, and the first improvement is a significant reduction in bundle size, going from ~26KB to [~7.6kB (Minified), 3.1kB (Minified + Gzipped)](https://bundlephobia.com/package/react-currency-input-field@4.0.0)\n\nFor more information, please refer to the [announcement post](https://github.com/cchanxzy/react-currency-input-field/blob/main/docs/v4.0.0-alpha-annoucement.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcchanxzy%2Freact-currency-input-field","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcchanxzy%2Freact-currency-input-field","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcchanxzy%2Freact-currency-input-field/lists"}