npm

Don't miss out on this year's npm Pride t-shirt designs!Order your favorites here »

react-intl-currency-input-fork

0.2.0 • Public • Published

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

example

To run the example:

$ npm run example:build
$ npm run example:serve

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

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, 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 other undocumented properties available for any React Component should be available.

install

npm i react-intl-currency-input-fork

Downloadsweekly downloads

30

version

0.2.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability