{"id":19312005,"url":"https://github.com/weblineindia/reactjs-currency-input","last_synced_at":"2025-10-23T15:13:57.289Z","repository":{"id":53918626,"uuid":"282224561","full_name":"weblineindia/ReactJS-Currency-Input","owner":"weblineindia","description":"Currency Input component built in ReactJS, used for currency value input field for all countries. You can change prefix and suffix for input. Can also handle negative and positive values depending on requirement.","archived":false,"fork":false,"pushed_at":"2024-04-29T05:28:05.000Z","size":312,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-03T07:36:36.064Z","etag":null,"topics":["currency","currency-input","format-currency","react-components","react-currency","react-currency-format","react-demo","react-libraries","reactjs","reactjs-components","reactjs-currency","reactjs-currency-input","reactjs-demo","reactjs-library","reusable-components"],"latest_commit_sha":null,"homepage":"https://www.weblineindia.com/software-development-resources.html","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/weblineindia.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2020-07-24T13:17:23.000Z","updated_at":"2024-09-19T18:02:51.000Z","dependencies_parsed_at":"2024-04-29T06:41:59.828Z","dependency_job_id":null,"html_url":"https://github.com/weblineindia/ReactJS-Currency-Input","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FReactJS-Currency-Input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FReactJS-Currency-Input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FReactJS-Currency-Input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FReactJS-Currency-Input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/weblineindia","download_url":"https://codeload.github.com/weblineindia/ReactJS-Currency-Input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223900372,"owners_count":17222028,"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","currency-input","format-currency","react-components","react-currency","react-currency-format","react-demo","react-libraries","reactjs","reactjs-components","reactjs-currency","reactjs-currency-input","reactjs-demo","reactjs-library","reusable-components"],"created_at":"2024-11-10T00:32:06.431Z","updated_at":"2025-10-23T15:13:52.209Z","avatar_url":"https://github.com/weblineindia.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ReactJS - Currency Input\n\nCurrency Input component built in ReactJS, used for currency value input field for all countries. You can change prefix and suffix for input. Can also handle negative and positive values depending on requirement.\n\n## Table of contents\n\n- [Browser Support](#browser-support)\n- [Demo](#demo)\n- [Features](#features)\n- [Getting started](#getting-started)\n- [Usage](#usage)\n- [Examples](#Examples)\n- [Available Props](#available-props)\n- [Want to Contribute?](#want-to-contribute)\n- [Collection of Other Components](#collection-of-components)\n- [Changelog](#changelog)\n- [Credits](#credits)\n- [License](#license)\n- [Keywords](#Keywords)\n\n## Browser Support\n\n![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) |\n--- | --- | --- | --- | --- | --- |\n83.0 ✔ | 77.0  ✔ | 13.1.1 ✔ | 83.0 ✔ | 11.9 ✔ |\n\n## Demo\n\n[![](currency-input.gif)](https://github.com/weblineindia/ReactJS-Currency-Input/currency-input.gif)\n\n## Features\n\n* Prefix, suffix and thousand separator.\n* Custom format pattern.\n* Masking.  \n* Custom formatting handler.\n* Formatting a input or a simple text.\n\n\n## Getting started\n\nInstall the npm package:\n\n``` bash\nnpm install react-weblineindia-currency-input \n# OR \nyarn add react-weblineindia-currency-input\n```\n\n## Usage\n\nES6\n```js\nimport CurrencyFormat from 'react-weblineindia-currency-input';\n```\n\nES5\n```js\nconst CurrencyFormat = require('react-weblineindia-currency-input');\n```\n\nTypescript\n```js\nimport * as CurrencyFormat from 'react-weblineindia-currency-input';\n```\n\n```js\nimport React, { Component } from \"react\";\nimport CurrencyFormat from 'react-weblineindia-currency-input';\n\nclass Test extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n    }\n  }\n  render(){\n      return(\n          \u003cdiv\u003e\n          \u003cCurrencyFormat value={2456981} displayType={'text'} thousandSeparator={true} prefix={'$'} /\u003e\n           \u003c/div\u003e\n      )\n  }\n}\nexport default Test\n\n```\n\n\n### Examples\n\n#### Prefix and thousand separator : Format currency as text\n```jsx\nvar CurrencyFormat = require('react-currency-format');\n\n\u003cCurrencyFormat value={2456981} displayType={'text'} thousandSeparator={true} prefix={'$'} /\u003e\n```\nOutput : $2,456,981\n\n#### Custom renderText method\n```jsx\nvar CurrencyFormat = require('react-currency-format');\n\n\u003cCurrencyFormat value={2456981} displayType={'text'} thousandSeparator={true} prefix={'$'} renderText={value =\u003e \u003cdiv\u003e{value}\u003c/div\u003e} /\u003e\n```\nOutput : `\u003cdiv\u003e $2,456,981 \u003c/div\u003e`\n\n#### Format with pattern : Format credit card as text\n```jsx\n\u003cCurrencyFormat value={4111111111111111} displayType={'text'} format=\"#### #### #### ####\" /\u003e\n```\nOutput : 4111 1111 1111 1111\n\n#### Prefix and thousand separator : Format currency in input\n```jsx\n\u003cCurrencyFormat thousandSeparator={true} prefix={'$'} /\u003e\n```\n## Available Props\n| Props        | Options           | Default  | Description |\n| ------------- |-------------| -----| -------- |\n| thousandSeparator | mixed: single character string or boolean true (true is default to ,) |none| Add thousand separators on number |\n| thousandSpacing | String, One of ['2', '2s', '3', '4'] | '3' | Add thousand group spacing on number. Default: '2' will format like 1,23,45,67,89 __ '3' will format like 1,234,567,981 __ '2s' will format like 1,23,45,67,981 __ '4' will format like 1,2345,6789 |\n| decimalSeparator | single character string| . | Support decimal point on a number |\n| decimalScale | number| none| If defined it limits to given decimal scale |\n| fixedDecimalScale | boolean| false| If true it add 0s to match given decimalScale|\n| allowNegative      | boolean     |   true | allow negative numbers (Only when format option is not provided) |\n| prefix      | String (ex : $)     |   none | Add a prefix before the number |\n| suffix | String (ex : /-)      |    none | Add a prefix after the number |\n| value | Number or String | null | Value to the number format. It can be a float number, or formatted string. If value is string representation of number (unformatted), isNumericString props should be passed as true. |\n| isNumericString | boolean | false | If value is passed as string representation of numbers (unformatted) then this should be passed as true |\n| displayType | String: text / input | input | If input it renders a input element where formatting happens as you input characters. If text it renders it as a normal text in a span formatting the given value |\n| type | One of ['text', 'tel'] | text | Input type attribute |\n| format | String : Hash based ex (#### #### #### ####) \u003cbr/\u003e Or Function| none | If format given as hash string allow number input inplace of hash. If format given as function, component calls the function with unformatted number and expects formatted number. |\n| removeFormatting | (formattedValue) =\u003e numericString | none | If you are providing custom format method and it add numbers as format you will need to add custom removeFormatting logic |\n| mask | String (ex : _) | none | If mask defined, component will show non entered placed with masked value. |\n| customInput | Component Reference | input | This allow supporting custom inputs with number format. |\n| onValueChange | (values) =\u003e {} | none | onValueChange handler accepts [values object](#values-object) |\n| isAllowed | ([values](#values-object)) =\u003e true or false | none | A checker function to check if input value is valid or not |\n| renderText | (formattedValue) =\u003e React Element | null | A renderText method useful if you want to render formattedValue in different element other than span. |\n-----\n\n\n## Want to Contribute?\n\n- Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part).\n- [Fork it](http://help.github.com/forking/).\n- Create new branch to contribute your changes.\n- Commit all your changes to your branch.\n- Submit a [pull request](http://help.github.com/pull-requests/).\n\n-----\n\n## Collection of Components\n\nWe have built many other components and free resources for software development in various programming languages. Kindly click here to view our [Free Resources for Software Development](https://www.weblineindia.com/software-development-resources.html).\n\n------\n\n## Changelog\n\nDetailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md).\n\n## Credits\n\nreact-weblineindia-currency-input is inspired by the [react-currency-format](https://www.npmjs.com/package/react-currency-format).\n\n## License\n\n[MIT](LICENSE)\n\n[mit]: https://github.com/weblineindia/ReactJS-Currency-Input/blob/master/LICENSE\n\n## Keywords\n\nreact-weblineindia-currency-input, react-currency-input, react-currency-component, currency-input, money-input, currency-input-field, input-formatter, input-field-component","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweblineindia%2Freactjs-currency-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweblineindia%2Freactjs-currency-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweblineindia%2Freactjs-currency-input/lists"}