JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2255
  • Score
    100M100P100Q123538F
  • License MIT

A React component for i18n currency input using the Intl API.

Package Exports

  • react-intl-currency-input

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 IntCurrencyInput 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(vaue); // value without mask (ex: 1234.56)
    console.log(maskedVaue); // masked value (ex: R$1234,56)
  };
  
  return(
    <IntCurrencyInput currency="BRL" config=currencyConfig
            onChange={handleChange} />
  );
}

export default BrlCurrencyComponent;

Properties

Name Type Default Description
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) => {}

Called when the component gains focus
onBlur function undefined (event) => {}

Called when the component loses focus
onKeyPress function undefined (event) => {}

Called when a key is pressed

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