Git Product home page Git Product logo

react-intl-currency-input's Introduction

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: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

react-intl-currency-input's People

Contributors

andrewfluck avatar armanio avatar bernardofbbraga avatar dependabot-preview[bot] avatar dependabot-support avatar dependabot[bot] avatar felipemouradev avatar gabteles avatar ifeins avatar kewers avatar thiagozanetti avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.