{"id":25443936,"url":"https://github.com/jsillitoe/react-currency-input","last_synced_at":"2025-05-16T07:06:33.974Z","repository":{"id":9227919,"uuid":"61226741","full_name":"jsillitoe/react-currency-input","owner":"jsillitoe","description":"React component for inputing currency amounts","archived":false,"fork":false,"pushed_at":"2024-07-22T03:49:43.000Z","size":793,"stargazers_count":203,"open_issues_count":63,"forks_count":162,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-09T15:04:36.960Z","etag":null,"topics":["currency","es6","javascript","react"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/jsillitoe.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":"2016-06-15T17:23:50.000Z","updated_at":"2024-08-14T09:57:50.000Z","dependencies_parsed_at":"2024-10-08T13:58:36.591Z","dependency_job_id":"31ac076f-e51e-47dc-a184-64a97e3a01d1","html_url":"https://github.com/jsillitoe/react-currency-input","commit_stats":{"total_commits":90,"total_committers":19,"mean_commits":"4.7368421052631575","dds":"0.38888888888888884","last_synced_commit":"2510ddc2d44f78049a77603927e083928c323f97"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsillitoe%2Freact-currency-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsillitoe%2Freact-currency-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsillitoe%2Freact-currency-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsillitoe%2Freact-currency-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsillitoe","download_url":"https://codeload.github.com/jsillitoe/react-currency-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254485063,"owners_count":22078767,"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":["currency","es6","javascript","react"],"created_at":"2025-02-17T15:17:58.783Z","updated_at":"2025-05-16T07:06:28.961Z","avatar_url":"https://github.com/jsillitoe.png","language":"JavaScript","readme":"# react-currency-input\n\nAn ES2015 react component for currency. Supports custom decimal and thousand separators as well as precision.\n\n[![Build Status](https://travis-ci.org/jsillitoe/react-currency-input.svg?branch=master)](https://travis-ci.org/jsillitoe/react-currency-input)\n\n## Changes\n\n## v1.3.0:\n\n- Deprecated \"onChange\" option in favor of \"onChangeEvent\". This fixes the argument order to better match React's default input handling\n- Updated dependencies to React 15\n- Added parseFloat polyfill\n- Persist events to deal with an issue of event pooling\n- Other bug fixes.\n\n## Installation\n\n```\nnpm install react-currency-input --save\n```\n\n## Integration\n\nYou can store the value passed in to the change handler in your state.\n\n```javascript\nimport React from 'react'\nimport CurrencyInput from 'react-currency-input';\n\nconst MyApp = React.createClass({\n    getInitialState(){\n        return ({amount: \"0.00\"});\n    },\n\n    handleChange(event, maskedvalue, floatvalue){\n        this.setState({amount: maskedvalue});\n    },\n    render() {\n        return (\n            \u003cdiv\u003e\n                \u003cCurrencyInput value={this.state.amount} onChangeEvent={this.handleChange}/\u003e\n            \u003c/div\u003e\n        );\n    }\n});\nexport default MyApp\n```\n\nYou can also assign a reference then access the value using a call to getMaskedValue().\n\n```javascript\nimport React from 'react'\nimport CurrencyInput from 'react-currency-input';\n\nconst MyApp = React.createClass({\n    handleSubmit(event){\n        event.preventDefault();\n        console.log(this.refs.myinput.getMaskedValue())\n    },\n    render() {\n        return (\n            \u003cform onSubmit={this.handleSubmit}\u003e\n                \u003cCurrencyInput ref=\"myinput\" /\u003e\n            \u003c/form\u003e\n        );\n    }\n});\nexport default MyApp\n```\n\n## Separators and Precision\n\nSpecify custom decimal and thousand separators:\n\n```javascript\n    // 1.234.567,89\n    \u003cCurrencyInput decimalSeparator=\",\" thousandSeparator=\".\" /\u003e\n```\n\nSpecify a specific precision:\n\n```javascript\n    // 123,456.789\n    \u003cCurrencyInput precision=\"3\" /\u003e\n```\n\n```javascript\n    // 123,456,789\n    \u003cCurrencyInput precision=\"0\" /\u003e\n```\n\n## Currency\n\nOptionally set a currency symbol as a prefix or suffix\n\n```javascript\n    // $1,234,567.89\n    \u003cCurrencyInput prefix=\"$\" /\u003e\n```\n\n```javascript\n    // 1,234,567.89 kr\n    \u003cCurrencyInput suffix=\" kr\" /\u003e\n```\n\nNegative signs come before the prefix\n\n```javascript\n    // -$20.00\n    \u003cCurrencyInput prefix=\"$\" value=\"-20.00\" /\u003e\n```\n\nAll other attributes are applied to the input element. For example, you can integrate bootstrap styling:\n\n```javascript\n    \u003cCurrencyInput className=\"form-control\" /\u003e\n```\n\n## Options\n\nOption            | Default Value | Description\n----------------- | ------------- | -----------------------------------------------------------------------------\nvalue             | 0             | The initial currency value\nonChange          | n/a           | Callback function to handle value changes. Deprecated, use onChangeEvent.\nonChangeEvent     | n/a           | Callback function to handle value changes\nprecision         | 2             | Number of digits after the decimal separator\ndecimalSeparator  | '.'           | The decimal separator\nthousandSeparator | ','           | The thousand separator\ninputType         | \"text\"        | Input field tag type. You may want to use `number` or `tel`*\nallowNegative     | false         | Allows negative numbers in the input\nallowEmpty        | false         | If no `value` is given, defines if it starts as null (`true`) or '' (`false`)\nselectAllOnFocus  | false         | Selects all text on focus or does not\nprefix            | ''            | Currency prefix\nsuffix            | ''            | Currency suffix\nautoFocus         | false         | Autofocus\n\n***Note:** Enabling any mask-related features such as prefix, suffix or separators with an inputType=\"number\" or \"tel\" could trigger errors. Most of those characters would be invalid in such input types.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsillitoe%2Freact-currency-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsillitoe%2Freact-currency-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsillitoe%2Freact-currency-input/lists"}