React Currency Mask

Description

react-currency-mask is a lib to help you mask currencies while the user types the values. Supports BRL currency

Installation

1$ yarn add react-currency-mask
2
3# or with npm
4
5$ npm install react-currency-mask --save

Using react-currency-mask

First, you need to import the CurrencyInput component. It receives any kind of input in order to give you control of styling and other third party libs.
For example, you can pass inside the CurrencyInput a Chakra UI Input, MUI Input, your own styled input and so on.

• It also supports usage along React Hook Form;
  • React Hook Form Controller is recommended for better control (example below).

---

CurrencyInput Component

1<CurrencyInput
2  onChangeValue={(event, originalValue, maskedValue) => {
3    console.log(event, originalValue, maskedValue);
4  }}
5/>

Parameters

onChangeValue Required, function that triggers after the value of input changes. It returns the Input Event, original value and masked value.

InputElement Optional, must be a React Element. It can be from a Third Party library (such as MUI, Chakra UI, or any other...) or your own custom Input.

onBlur Optional, function that triggers after blur. It returns the Input Event, original value and masked value.

onFocus Optional, function that triggers after focused. It returns the Input Event, original value and masked value.

onKeyPress Optional, function that triggers after any key press. It returns the Keyboard Event, original value and masked value.

defaultValue Optional, default value of the Input.

value Optional, value of the input if you want to control it.

max Optional, max value permitted.

currency Optional, currency you want to use as mask. Default is BRL.

locale Optional, locale you want to format currency. Default is pt-BR.

hideSymbol Optional, boolean to control the currency symbol display.

autoSelect Optional, if you want to select the value of input when clicking it.

autoReset Optional, if you want to reset the value after blur.

---

Examples

Default Input

1import { CurrencyInput } from 'react-currency-mask';
2
3const MyComponent = () => {
4  return (
5    <CurrencyInput
6      onChangeValue={(event, originalValue, maskedValue) => {
7        console.log(event, originalValue, maskedValue);
8      }}
9    />
10  );
11};

Example output

Using a custom input (Third Party or your own)

1import { CurrencyInput } from 'react-currency-mask';
2import { TextField } from '@mui/material';
3
4const MyComponent = () => {
5  return (
6    <CurrencyInput
7      onChangeValue={(event, originalValue, maskedValue) => {
8        console.log(event, originalValue, maskedValue);
9      }}
10      InputElement={<TextField label="Custom Input" size="small" />}
11    />
12  );
13};

*This example uses a MUI TextField

Example output

Integrating with React-Hook-Form Controller

1import { CurrencyInput } from 'react-currency-mask';
2import { Controller, useFormContext } from 'react-hook-form';
3
4type MyComponentProps = {
5  name: string,
6};
7
8const MyComponent = ({ name }: MyComponentProps) => {
9  const { control } = useFormContext();
10
11  return (
12    <Controller
13      name={name}
14      control={control}
15      render={({ field }) => (
16        <CurrencyInput
17          value={field.value}
18          onChangeValue={(_, value) => {
19            field.onChange(value);
20          }}
21          InputElement={<MyCustomInput />}
22        />
23      )}
24    />
25  );
26};

*Input Element is optional, use it just if you want a custom input

---

License

react-currency-mask is MIT licensed.

---

Thank you and be free to contribute.