input-currency-react

Currency input React w/ Hooks

This libraries propose to introduce a hooks capable of formate currencies and calculate directly in the input (add, subtract, division and multiplication).

This component libraries use TypeScript, Hooks.

Install

  npm install input-currency-react  # or yarn add input-currency-react

Playground - Try it out

On Code Sandbox

Browser compatibility (Tested)

Chrome	Edge	Firefox	Safari	Internet Explorer 11	Opera
:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:	:grey_question:

Compatible with react-hook-form

Ex. Code:

  import React from react;
  import { useForm, Controller } from "react-hook-form";

  const MyCustomForm = () => {
    const { 
        control,
        handleSubmit, 
    } = useForm();

    return (
      <form onSubmit={handleSubmit(onSubmit)}>
        <Controller
        name="value"
        control={control}
        defaultValue="0,00"
        render={({value, onChange}) => (
          <CurrencyInput 
            value={ value } 
            options={{ style: "decimal", allowNegative: false }}
            onChangeEvent={(_, maskedValue) => { 
              onChange(maskedValue);
            }}
            required={true}
          />
        )}
        />
      </form>
    )
  }

How to use Components

Only Currency Input

Demo:

Ex. Code:

  import React from react;
  import { 
    CurrencyInput, 
    Currencies, 
    Locales 
  } from 'input-currency-react';

  const handleOnChange = (inputElement, maskedValue, value) => {};

  <CurrencyInput 
    value="000" // Initial value
    options={{ 
      precision: 2,
      style: "currency",
      allowNegative: "true",
      alwaysNegative: "false",
      locale: Locales["English (United States)"], // Format Type
      i18nCurrency: Currencies["US Dollar"] // Symbol
    }}
    autoFocus={true}
    onChangeEvent={handleOnChange}
  />

Currency Input Can Math

Demo:

Ex. Code:

  import { 
    CurrencyCalculatorInput, 
    Currencies, 
    Locales 
  } from 'input-currency-react';

  const handleOnChange = (inputElement, maskedValue, value) => {};

  <CurrencyCalculatorInput 
    value="000" // Initial value
    options={{ 
      precision: 3,
      style: "decimal",
      locale: LocalesLocales["Portuguese (Brazil)"], 
      i18nCurrency: Currencies["Brazilian Real"]
    }}
    autoFocus={true}
    onChangeEvent={handleOnChange}
  />

How to use Hooks

  import { 
    CurrencyInputProps, 
    useCurrencyFormat, 
  } from 'input-currency-react';

  const MyCustomCurrencyInput:React.FC<CurrencyInputProps> = (props) => {
    const { value, options, onChangeEvent, ...otherProps } = props;
    const [
        formattedValue, 
        handleOnChange,
        handleOnKeyDown, 
        handleOnClick 
    ] = useCurrencyFormat(value, 
    {...options, 
    onChangeCallBack: onChangeEvent }); // or useCurrencyFormatCalculator

      return (
          <input 
              type="text" 
              style={{ textAlign:"right" }}
              onChange={ handleOnChange }
              onKeyDown={ handleOnKeyDown }
              onClick={ handleOnClick }
              value={ formattedValue }
              {...otherProps} />
      )
  }

Options

Options input

Option	Default Value	Description
value	0	The initial value
onChangeEvent	n/a	Callback function to handle value change
autoFocus	false	Autofocus
ref	n/a	Reference for HTMLInputElement
options	default hooks	hooks props

Options hooks

Props	Default Value	Description
precision	2	Fraction Digits
style	currency	currency or decimal(Remove symbol)
locale	pt-BR	Country Code Reference(Currency symbol)
i18nCurrency	BRL	String i18n(Format Type)
allowNegative *	true	Allow negative numbers in the input
alwaysNegative *	false	Prefix negative

Note: *not present in useCurrencyFormatCalculator

*Note: This library use toLocaleString() to format the value.