Package Exports
- react-currency-input-field
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-currency-input-field) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
React Currency Input Field Component
Features
- Allows abbreviations eg. 1k = 1,000 2.5m = 2,500,000
- Prefix option eg. £ or $
- Can allow/disallow decimals
- Automatically inserts comma separator
- Only allows valid numbers
- Lightweight and simple
Demo
Install
npm install react-currency-input-field
or
yarn add react-currency-input-field
Usage
import CurrencyInput from 'react-currency-input-field';
<CurrencyInput
id="input-example"
name="input-name"
placeholder="£1,000"
defaultValue={1000}
allowDecimals={true}
decimalsLimit={2}
onChange={(value, name) => console.log(value, name)}
/>;Have a look in src/examples for more examples on implementing and validation.
Abbreviations
It can parse values with abbreviations k, m and b
Examples:
- 1k = 1,000
- 2.5m = 2,500,000
- 3.456B = 3,456,000,000
Props
| Name | Type | Default | Description |
|---|---|---|---|
| allowDecimals | boolean |
true |
Allow decimals |
| id | string |
Component id | |
| name | string |
Component (input) name | |
| className | string |
Class names | |
| decimalsLimit | number |
2 |
Limit length of decimals allowed |
| defaultValue | number |
Default value | |
| disabled | boolean |
false |
Disabled |
| onChange | function |
Handle change in value. Value will be null or number |
|
| placeholder | string |
Placeholder if no value | |
| prefix | string |
Include a prefix eg. £ or $ | |
| maxLength | number |
Maximum characters the user can enter |
Issues
Feel free to message me if you have any questions