{"_id":"@aguacatevelarde/react-currency-input-field","_rev":"1-703bed3a34d5766639f4fd0defd0bbc8","name":"@aguacatevelarde/react-currency-input-field","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@aguacatevelarde/react-currency-input-field","version":"1.0.0","description":"React component for formatting currency and numbers with react 18 compatibility.","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","homepage":"https://github.com/aguacatevelarde/react-currency-input-field","scripts":{"build":"rm -rf dist && tsc && rollup -c","start":"parcel src/examples/index.html","test":"jest --coverage --roots ./src","test-ci":"cross-env NODE_ICU_DATA=node_modules/full-icu jest --coverage","typecheck":"tsc && tsc --project tsconfig.test.json","lint":"eslint src --max-warnings=0","gh-predeploy":"parcel build src/examples/index.html --dist-dir demo/examples --public-url ./","gh-deploy":"yarn gh-predeploy && gh-pages -d demo/examples","ci":"yarn && yarn build","codecov":"codecov","semantic-release":"semantic-release"},"repository":{"type":"git","url":"git+https://github.com/aguacatevelarde/react-currency-input-field.git"},"bugs":{"url":"https://github.com/aguacatevelarde/react-currency-input-field/issues","email":"lg.velarde.andrade@gmail.com"},"keywords":["react","component","currency","form","field","number","input","intl","locale"],"author":{"name":"cchanxzy"},"license":"MIT","devDependencies":{"@commitlint/cli":"^12.1.4","@commitlint/config-conventional":"^12.1.4","@rollup/plugin-commonjs":"^19.0.0","@rollup/plugin-node-resolve":"^13.0.0","@rollup/plugin-typescript":"^8.2.1","@semantic-release/changelog":"^5.0.1","@semantic-release/git":"^9.0.0","@testing-library/dom":"^7.31.0","@testing-library/jest-dom":"^5.12.0","@testing-library/react":"^11.2.7","@testing-library/user-event":"^13.1.9","@types/jest":"^26.0.23","@types/react":"^17.0.6","@types/react-dom":"^17.0.5","@typescript-eslint/eslint-plugin":"^4.24.0","@typescript-eslint/parser":"^4.24.0","codecov":"^3.8.2","cross-env":"^7.0.3","eslint":"^7.27.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","eslint-plugin-react":"^7.23.2","full-icu":"^1.3.4","gh-pages":"^3.1.0","husky":"^6.0.0","jest":"^26.6.3","lint-staged":"^11.0.0","parcel":"^2.0.0-rc.0","prettier":"^2.3.0","react":"^17.0.2","react-dom":"17.0.2","rollup":"^2.52.7","semantic-release":"^17.4.3","source-map-loader":"^3.0.0","ts-jest":"^26.5.6","tslib":"^2.3.0","typescript":"^4.2.4"},"peerDependencies":{"react":"^16.9.0 || ^17.0.0 || ^18.0.0"},"dependencies":{},"jest":{"verbose":false,"collectCoverage":true,"transform":{"^.+\\.tsx?$":"ts-jest"},"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","moduleFileExtensions":["ts","tsx","js","jsx"]},"targets":{"main":false,"module":false,"types":false},"gitHead":"d7c63d5f5398f30d37f3480129c8775a28d03f2e","_id":"@aguacatevelarde/react-currency-input-field@1.0.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-FGOFhU7EY/t3eUxKi8U4AU0NiY8BMDvd9f+JyxA4H62utVcrG+gSzmfeixotwLhQvajSFNiPCARJmLA3hv4+ug==","shasum":"71ef851ffb6cc165368fe574ddc05f9215416ed1","tarball":"https://registry.npmjs.org/@aguacatevelarde/react-currency-input-field/-/react-currency-input-field-1.0.0.tgz","fileCount":56,"unpackedSize":143505,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDmIORxpW29khZJJy9Y2GGcab18e+5KLlMjXHc+/RSHgIgBz6AkqbKg0lTcMFzvDwETZaNhB1R4Kv2sGKs3q3c1AU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7IfjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpV5A/6A0EiYm5HVrDSRCWROEYD3uyjXS1+MJMgwK+QhY5ND1oQKyyf\r\nekQpOuRof8u0lh3SJgEmlj3rdNhGRQ415FIuyRXdZv7xKMmnxz82awZZdALn\r\nFY9LyzQGbOL+Sx70Jzy1qCvcpxoINk3qE7fMqMJxRftMX39jK9YuC6tLWN1i\r\n3cDllkF8t6fRZrBExK6vxfe7ycOFZRKVNI10pw5u2GAOnRhAiMS8jFdx1Imj\r\nJnBRoaxwx1xNYf9TBg1hFxwW8bD674qoFBi9rAATFUJmZ5IFR6R+VWyAStkm\r\n7suekVJWN0MABuO+X8U1MzlaqSKRybMOD0bmlyyS9sVWr1ya+x8mhO29puJ2\r\nwKVbUPzgKbR+GHltN1OA6AgbGzSsgneYq/QAPGb3FOS9/6Oc62tjYjLiDV4j\r\nf1QMqU1zjG93b9QMlVmAeWTj2YQsyNzRB/kYaLI4KVeJ/0i21aa7Aol3aDCA\r\n04VH7PMkS/WA+EccYfLV2Tks/BkSiHv6AP4tV0YiqQlKIgoMSyxtqw6HjXUa\r\n0NJN4JWo6I2i8ieiITscxJieM/oYxZnIF7jIAba5SNIYDAzx93n6OgNwFwh9\r\npX/yHtPYKUc25lJZKhXREMGujDSAnYLoKUk3QgCwpbzpwiUYwmEHOarhP1Ad\r\nlGPyHeWyWYVpSiSDU2EagpIoOMxhzDg+vjQ=\r\n=3A8q\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"aguacatevelarde","email":"lg.velarde.andrade@gmail.com"},"directories":{},"maintainers":[{"name":"aguacatevelarde","email":"lg.velarde.andrade@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-currency-input-field_1.0.0_1659668451366_0.6400697960754762"},"_hasShrinkwrap":false},"1.0.1":{"name":"@aguacatevelarde/react-currency-input-field","version":"1.0.1","description":"React component for formatting currency and numbers with react 18 compatibility.","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","homepage":"https://github.com/aguacatevelarde/react-currency-input-field","scripts":{"build":"rm -rf dist && tsc && rollup -c","start":"parcel src/examples/index.html","test":"jest --coverage --roots ./src","test-ci":"cross-env NODE_ICU_DATA=node_modules/full-icu jest --coverage","typecheck":"tsc && tsc --project tsconfig.test.json","lint":"eslint src --max-warnings=0","gh-predeploy":"parcel build src/examples/index.html --dist-dir demo/examples --public-url ./","gh-deploy":"yarn gh-predeploy && gh-pages -d demo/examples","ci":"yarn && yarn build","codecov":"codecov","semantic-release":"semantic-release"},"repository":{"type":"git","url":"git+https://github.com/aguacatevelarde/react-currency-input-field.git"},"bugs":{"url":"https://github.com/aguacatevelarde/react-currency-input-field/issues","email":"lg.velarde.andrade@gmail.com"},"keywords":["react","component","currency","form","field","number","input","intl","locale"],"author":{"name":"cchanxzy"},"license":"MIT","devDependencies":{"@commitlint/cli":"^12.1.4","@commitlint/config-conventional":"^12.1.4","@rollup/plugin-commonjs":"^19.0.0","@rollup/plugin-node-resolve":"^13.0.0","@rollup/plugin-typescript":"^8.2.1","@semantic-release/changelog":"^5.0.1","@semantic-release/git":"^9.0.0","@testing-library/dom":"^7.31.0","@testing-library/jest-dom":"^5.12.0","@testing-library/react":"^11.2.7","@testing-library/user-event":"^13.1.9","@types/jest":"^26.0.23","@types/react":"^17.0.6","@types/react-dom":"^17.0.5","@typescript-eslint/eslint-plugin":"^4.24.0","@typescript-eslint/parser":"^4.24.0","codecov":"^3.8.2","cross-env":"^7.0.3","eslint":"^7.27.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","eslint-plugin-react":"^7.23.2","full-icu":"^1.3.4","gh-pages":"^3.1.0","husky":"^6.0.0","jest":"^26.6.3","lint-staged":"^11.0.0","parcel":"^2.0.0-rc.0","prettier":"^2.3.0","react":"^17.0.2","react-dom":"17.0.2","rollup":"^2.52.7","semantic-release":"^17.4.3","source-map-loader":"^3.0.0","ts-jest":"^26.5.6","tslib":"^2.3.0","typescript":"^4.2.4"},"peerDependencies":{"react":"^16.9.0 || ^17.0.0 || ^18.0.0"},"dependencies":{},"jest":{"verbose":false,"collectCoverage":true,"transform":{"^.+\\.tsx?$":"ts-jest"},"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","moduleFileExtensions":["ts","tsx","js","jsx"]},"targets":{"main":false,"module":false,"types":false},"gitHead":"201a5384bf71b149d6d947908ee73c1c1194ec89","_id":"@aguacatevelarde/react-currency-input-field@1.0.1","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-ewPP2ktBxhOtKdqsoGtW7DkFvXlSU5JGAfsV9/SfSH1vyX0f0JrKZXAysxmgXox+aTMUx8IC92zxwNfqBVSTGQ==","shasum":"5cba1b79bb993dd48d6d7e1d39bc72a20c4ea0d9","tarball":"https://registry.npmjs.org/@aguacatevelarde/react-currency-input-field/-/react-currency-input-field-1.0.1.tgz","fileCount":76,"unpackedSize":272916,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrmblvfgp7mYGMfw7r89z9ac4V0KsYW+Ehv+TTLq5DhAIhANkGotq/DZuvhSy/RXAzrTdvjgmxMVOhjyGQJ2bo2UFR"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7Ip0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLMRAAoOuHJ1lYKNrI83sb/CREbyRPfWVOiIDcd4bX1v9jYlIryi2N\r\nDgxDzzmMn/P0RvX26lDC0s/52uxPcx9IVqyEQChgvlGFa7BPSPM1jHV1nu0x\r\nq/Oi2jLRnT6GVc00Z9n0vlajGMMGqAXNePFkMjwh/wgujNjqz16wPzHyHthb\r\n6XhbOA15dFBl3JRqZqrbMarO4b5sceI7+Q/JFK9lxTpq7lrWSbzR2VbEc6rk\r\n16S4tI6+uMPyoxH6ujhvOxtyc2yEYj6Z3xT/GvuhA3vB2FZd52XiXxwJmWkq\r\npWnU0nUr/i0MyDu8rwD5Bs2yxqzcPtTjmIFHEoaIB/d5V4S/s4GuvN4vj6Hn\r\nK+ZyaXDnpilnb/mnCeEJBggA5X4HeHL06rZ9ndMvBfXF7dCz9EBobMjsAo9c\r\nx6pa9/Hh/+wY9bIf5OpvZxTb0olx5mkqJg/xOFZRG3e9KHG2HLvp/gl0C+yx\r\nvaftI+BXlZ+eD24Bzb1XmdlyM8zRGnOq3JJ2OCCLLE6TXQ+dbn4/kGs0f9ln\r\nx4QTGILzrSERcwLMMk/v+LIlkIhmNn+pWUmIi8iimtvyIaMdepsvtMA7WST0\r\ntmNISm2MLjdQlVxcbW9yeBY8jpd5ajMMfVrPVrEN4tywwF34V8ReentoR0Ba\r\nVWtn/J6P48prGtU8rK3MjmEPa/qzuUHEP34=\r\n=CJjY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"aguacatevelarde","email":"lg.velarde.andrade@gmail.com"},"directories":{},"maintainers":[{"name":"aguacatevelarde","email":"lg.velarde.andrade@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-currency-input-field_1.0.1_1659669108638_0.2798040101936643"},"_hasShrinkwrap":false}},"time":{"created":"2022-08-05T03:00:51.255Z","1.0.0":"2022-08-05T03:00:51.580Z","modified":"2022-08-05T03:11:48.916Z","1.0.1":"2022-08-05T03:11:48.822Z"},"maintainers":[{"name":"aguacatevelarde","email":"lg.velarde.andrade@gmail.com"}],"description":"React component for formatting currency and numbers with react 18 compatibility.","homepage":"https://github.com/aguacatevelarde/react-currency-input-field","keywords":["react","component","currency","form","field","number","input","intl","locale"],"repository":{"type":"git","url":"git+https://github.com/aguacatevelarde/react-currency-input-field.git"},"author":{"name":"cchanxzy"},"bugs":{"url":"https://github.com/aguacatevelarde/react-currency-input-field/issues","email":"lg.velarde.andrade@gmail.com"},"license":"MIT","readme":"# React Currency Input Field Component\n\n[](https://www.npmjs.com/package/react-currency-input-field) [](https://www.npmjs.com/package/react-currency-input-field) [](https://codecov.io/gh/cchanxzy/react-currency-input-field/) [](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 - [Migrating to v3.0.0](#migrating-to-v300)\n - [Examples](#examples)\n - [Install](#install)\n - [Usage](#usage)\n - [Props](#props)\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 - [v3.0.0 Release Notes](#v300-release-notes)\n - [Breaking Changes](#breaking-changes)\n - [Improvements in v3](#improvements-in-v3)\n - [Reasoning](#reasoning)\n - [Issues](#issues)\n\n## Features\n\n- Allows [abbreviations](#abbreviations) eg. 1k = 1,000 2.5m = 2,500,000\n- Prefix and Suffix options eg. £ or \\$\n- Automatically inserts [group separator](#separators)\n- Accepts [Intl locale config](#intl-locale-config)\n- Can use arrow down/up to step\n- Can allow/disallow decimals\n- Written in TypeScript and has type support\n- Does not use any third party packages\n\n## Migrating to v3.0.0\n\nThere are a number of breaking changes in v3.0.0, please read the [release notes](#v300-release-notes) if migrating from v2 to v3.\n\n:warning: Most important change is: `onChange` has been renamed to `onValueChange`\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/master/src/examples)\n\n[](https://cchanxzy.github.io/react-currency-input-field)\n\n## Install\n\n`npm install react-currency-input-field`\n\nor\n\n`yarn add react-currency-input-field`\n\n## Usage\n\n```js\nimport CurrencyInput from 'react-currency-input-field';\n\n console.log(value, name)}\n/>;\n```\n\nHave a look in [`src/examples`](https://github.com/cchanxzy/react-currency-input-field/tree/master/src/examples) for more examples on implementing and validation.\n\n## Props\n\n| Name | Type | Default | Description |\n| -------------------------------------------------- | ---------- | -------------- | ---------------------------------------------------------------------------------------------- |\n| allowDecimals | `boolean` | `true` | Allow decimals |\n| allowNegativeValue | `boolean` | `true` | Allow user to enter negative value |\n| defaultValue | `number` | | Default value |\n| value | `number` | | Programmatically set the value |\n| onValueChange | `function` | | Handle change in value |\n| placeholder | `string` | | Placeholder if no value |\n| [decimalsLimit](#decimal-scale-and-decimals-limit) | `number` | `2` | Limit length of decimals allowed |\n| [decimalScale](#decimal-scale-and-decimals-limit) | `number` | | Specify decimal scale for padding/trimming eg. 1.5 -> 1.50 or 1.234 -> 1.23 if decimal scale 2 |\n| [fixedDecimalLength](#fixed-decimal-length) | `number` | | Value will always have the specified length of decimals |\n| [prefix](#prefix-and-suffix) | `string` | | Include a prefix eg. £ or \\$ |\n| [suffix](#prefix-and-suffix) | `string` | | Include a suffix eg. € or % |\n| [decimalSeparator](#separators) | `string` | locale default | Separator between integer part and fractional part of value |\n| [groupSeparator](#separators) | `string` | locale default | Separator between thousand, million and billion |\n| [intlConfig](#intl-locale-config) | `object` | | International locale config |\n| disabled | `boolean` | `false` | Disabled |\n| disableAbbreviations | `boolean` | `false` | Disable abbreviations eg. 1k -> 1,000, 2m -> 2,000,000 |\n| [disableGroupSeparators](#separators) | `boolean` | `false` | Disable auto adding the group separator between values, eg. 1000 -> 1,000 |\n| maxLength | `number` | | Maximum characters the user can enter |\n| step | `number` | | Incremental value change on arrow down and arrow up key press |\n| transformRawValue | `function` | | Transform the raw value from the input before parsing. Needs to return `string`. |\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`.\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;\n// £123\n\n;\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;\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;\n\n;\n\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 -> 1.00\n- 123 -> 1.23\n- 12.3 -> 12.30\n- 12.34 -> 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: 'en-IN', currency: 'INR' },\n});\n\nconsole.log(formattedValue2);\n// ₹5,00,000\n```\n\n## v3.0.0 Release Notes\n\n### Breaking Changes\n\n- :warning: `onChange` renamed to `onValueChange` :warning:\n- `onBlurValue` has been removed.\n- `turnOffAbbreviations` renamed to `disableAbbreviations`.\n- `turnOffSeparators` renamed to `disableGroupSeparators`.\n- `precision` renamed to `decimalScale`\n\n### Improvements in v3\n\n- [Intl locale config](#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._\n- Group separator will default to browser locale if not specified.\n- Can pass `ref` to the component.\n- `onChange` and `onBlur` functions can be passed in and will be called with original event.\n\n### Reasoning\n\nAs 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.\n\nHowever, 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.\n\nTherefore, 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.\n\nI apologize if any of the changes cause new bugs or issues. Please let me know and I will fix asap.\n\n## Issues\n\nFeel free to raise an issue on Github if you find a bug or have a feature request\n","readmeFilename":"README.md"}