input

React component for i18n currency input using Intl API

Feb 27, 2020
React component for i18n currency input using Intl API

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

react-intl-currency-input

To run the example:

$ npm run example:start

And a new browser window will open at http://localhost:3000

Properties

NameTypeDefaultDescription
currencystringUSDSets the currency code
configobjectUSD related configurationConfiguration object compliant with react-intl intlShape
autoFocusbooleanfalseEnables auto-focus when the component gets displayed
autoSelectbooleanfalseEnables auto-select when the component gets displayed
autoResetbooleanfalseResets component's internal state when loses focus
onChangefunctionundefined(event, value, maskedValued) => {}

Exposes the Event itself, the value with no mask and maskedValue for displaying purposes
onFocusfunctionundefined(event, value, maskedValued) => {

Called when the component gains focus
onBlurfunctionundefined(event, value, maskedValued) => {

Called when the component loses focus
onKeyPressfunctionundefined(event, key, keyCode) => {}

Called when a key is pressed
maxnumberundefinedmaximum value for the input. Input does not change if the value is greater than max

All other undocumented properties available for any React Component should be available.

GitHub

Recommended