{"id":15043270,"url":"https://github.com/thiagozanetti/react-intl-currency-input","last_synced_at":"2025-04-04T14:09:12.252Z","repository":{"id":39753350,"uuid":"82754981","full_name":"thiagozanetti/react-intl-currency-input","owner":"thiagozanetti","description":"React component for i18n currency input using Intl API.","archived":false,"fork":false,"pushed_at":"2023-06-08T09:15:09.000Z","size":1552,"stargazers_count":198,"open_issues_count":11,"forks_count":49,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-28T13:08:22.043Z","etag":null,"topics":["intl","intl-api","react","react18","typescript","vite"],"latest_commit_sha":null,"homepage":"https://react-intl-currency-input-app.vercel.app","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/thiagozanetti.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-22T03:12:52.000Z","updated_at":"2025-03-06T13:52:28.000Z","dependencies_parsed_at":"2024-06-18T14:15:11.580Z","dependency_job_id":null,"html_url":"https://github.com/thiagozanetti/react-intl-currency-input","commit_stats":{"total_commits":199,"total_committers":15,"mean_commits":"13.266666666666667","dds":0.5979899497487438,"last_synced_commit":"6048b32f9ff374f90fd4028b8f114ce2d684df8f"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thiagozanetti%2Freact-intl-currency-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thiagozanetti%2Freact-intl-currency-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thiagozanetti%2Freact-intl-currency-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thiagozanetti%2Freact-intl-currency-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thiagozanetti","download_url":"https://codeload.github.com/thiagozanetti/react-intl-currency-input/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247190253,"owners_count":20898702,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["intl","intl-api","react","react18","typescript","vite"],"created_at":"2024-09-24T20:48:47.270Z","updated_at":"2025-04-04T14:09:12.233Z","avatar_url":"https://github.com/thiagozanetti.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## react-intl-currency-input\n\nA React component for i18n currency input using [Intl API](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Intl).\n\n### Installation\n\n```sh\n$ npm install react-intl-currency-input --save-dev\n```\n\n### How to use\n\n```js\nimport React from \"react\"\nimport IntlCurrencyInput from \"react-intl-currency-input\"\n\nconst currencyConfig = {\n  locale: \"pt-BR\",\n  formats: {\n    number: {\n      BRL: {\n        style: \"currency\",\n        currency: \"BRL\",\n        minimumFractionDigits: 2,\n        maximumFractionDigits: 2,\n      },\n    },\n  },\n};\n\nconst BrlCurrencyComponent = () =\u003e {\n  const handleChange = (event, value, maskedValue) =\u003e {\n    event.preventDefault();\n\n    console.log(value); // value without mask (ex: 1234.56)\n    console.log(maskedValue); // masked value (ex: R$1234,56)\n  };\n\n  return(\n    \u003cIntlCurrencyInput currency=\"BRL\" config={currencyConfig}\n            onChange={handleChange} /\u003e\n  );\n}\n\nexport default BrlCurrencyComponent;\n\n```\n### Example\n\n![example](https://user-images.githubusercontent.com/333482/228024696-844101c3-3e4d-419e-8e69-cf649245789c.png)\n\nTo run the example:\n\n```sh\n$ npx turbo run start:app\n```\n\nAnd a new browser window will open at [http://localhost:3000](http://localhost:3000)\n\n### Properties\n\n| Name | Type | Default | Description |\n| :---: | :---: | :---: | :--- |\n| defaultValue | number | 0 | Sets the default / initial value to be used by the component on the first load |\n| currency | string | USD | Sets the [currency code](http://www.xe.com/iso4217.php) |\n| config | object | USD related configuration | Configuration object compliant with react-intl [intlShape](https://github.com/yahoo/react-intl/wiki/API#intlshape) |\n| autoFocus | boolean | false | Enables auto-focus when the component gets displayed |\n| autoSelect | boolean | false | Enables auto-select when the component gets displayed |\n| autoReset | boolean| false | Resets component's internal state when loses focus |\n| onChange | function | undefined | `(event, value, maskedValued) =\u003e {}`\u003cbr\u003e\u003cbr\u003eExposes the `Event` itself, the `value` with no mask and `maskedValue` for displaying purposes |\n| onFocus | function | undefined | `(event, value, maskedValued) =\u003e {`\u003cbr\u003e\u003cbr\u003eCalled when the component gains focus |\n| onBlur | function | undefined| `(event, value, maskedValued) =\u003e {`\u003cbr\u003e\u003cbr\u003eCalled when the component loses focus |\n| onKeyPress | function| undefined | `(event, key, keyCode) =\u003e {}`\u003cbr\u003e\u003cbr\u003eCalled when a `key` is pressed |\n| max | number| undefined | Maximum value for the input. Input does not change if the value is greater than max |\n\nAll the other undocumented properties available for any `React Component` should also be available.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthiagozanetti%2Freact-intl-currency-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthiagozanetti%2Freact-intl-currency-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthiagozanetti%2Freact-intl-currency-input/lists"}