Package Exports
- react-intl-currency-input
- react-intl-currency-input/index.cjs
- react-intl-currency-input/index.js
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-intl-currency-input) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-intl-currency-input
A React component for i18n currency input using Intl API.
Installation
$ npm install react-intl-currency-input --save-dev
How to use
import React from "react"
import IntlCurrencyInput from "react-intl-currency-input"
const currencyConfig = {
locale: "pt-BR",
formats: {
number: {
BRL: {
style: "currency",
currency: "BRL",
minimumFractionDigits: 2,
maximumFractionDigits: 2,
},
},
},
};
const BrlCurrencyComponent = () => {
const handleChange = (event, value, maskedValue) => {
event.preventDefault();
console.log(value); // value without mask (ex: 1234.56)
console.log(maskedValue); // masked value (ex: R$1234,56)
};
return(
<IntlCurrencyInput currency="BRL" config={currencyConfig}
onChange={handleChange} />
);
}
export default BrlCurrencyComponent;
Example
To run the example:
$ npm run example:start
And a new browser window will open at http://localhost:3000
Properties
Name | Type | Default | Description |
---|---|---|---|
defaultValue | number | 0 | Sets the default / initial value to be used by the component on the first load |
currency | string | USD | Sets the currency code |
config | object | USD related configuration | Configuration object compliant with react-intl intlShape |
autoFocus | boolean | false | Enables auto-focus when the component gets displayed |
autoSelect | boolean | false | Enables auto-select when the component gets displayed |
autoReset | boolean | false | Resets component's internal state when loses focus |
onChange | function | undefined | (event, value, maskedValued) => {} Exposes the Event itself, the value with no mask and maskedValue for displaying purposes |
onFocus | function | undefined | (event, value, maskedValued) => { Called when the component gains focus |
onBlur | function | undefined | (event, value, maskedValued) => { Called when the component loses focus |
onKeyPress | function | undefined | (event, key, keyCode) => {} Called when a key is pressed |
max | number | undefined | Maximum value for the input. Input does not change if the value is greater than max |
All the other undocumented properties available for any React Component
should also be available.
TO-DO
- Add unit tests
- Add a Storybook for examples and UI tests