# react-currency-mask

> React Input that handles and apply currency masks in your own inputs

Latest version **1.3.5** (published 2026-07-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-currency-mask
pnpm add react-currency-mask
yarn add react-currency-mask
bun add react-currency-mask
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 1.3.5 |
| Published | 2026-07-17 |
| First published | 2023-01-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 13.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 29 |
| Author | Leonardo Dias |
| Maintainers | leoreisdias |
| Keywords | currency, mask, brl, input, money |

## Links

- npm: https://www.npmjs.com/package/react-currency-mask
- Repository: https://github.com/logbookfordevs/react-currency-mask
- Homepage: https://github.com/logbookfordevs/react-currency-mask#readme
- Issues: https://github.com/logbookfordevs/react-currency-mask/issues
- npm.io page: https://npm.io/package/react-currency-mask

## Recent versions

- 1.3.5 (latest) — 2026-07-17
- 1.3.4 — 2026-03-13
- 1.3.3 — 2024-10-08
- 1.3.2 — 2024-05-07
- 1.3.1 — 2023-05-25
- 1.3.0 — 2023-04-04
- 1.2.0 — 2023-04-03
- 1.1.5 — 2023-03-12
- 1.1.4 — 2023-01-23
- 1.1.3 — 2023-01-23
- 1.1.2 — 2023-01-23
- 1.1.1 — 2023-01-23
- 1.0.2 — 2023-01-23

## README

# React Currency Mask

[![NPM](https://img.shields.io/npm/v/react-currency-mask)](https://www.npmjs.com/package/react-currency-mask)
[![npm](https://img.shields.io/npm/l/react-currency-mask)](https://github.com/leoreisdias/react-currency-mask/blob/main/LICENSE)

## Description

[react-currency-mask](https://github.com/leoreisdias/react-currency-mask.git) is a lib to help you mask currencies while the user types the values. _Supports BRL currency_

## Installation

```bash
$ yarn add react-currency-mask

# or with npm

$ npm install react-currency-mask --save
```

## Using react-currency-mask

First, you need to import the <b>CurrencyInput</b> component. It receives any kind of input in order to give you control of styling and other third party libs.<br />
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 <b>React Hook Form</b>;
  - React Hook Form Controller is recommended for better control (example below).

---

## CurrencyInput Component

```js
<CurrencyInput
  onChangeValue={(event, originalValue, maskedValue) => {
    console.log(event, originalValue, maskedValue);
  }}
/>
```

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

```js
import { CurrencyInput } from 'react-currency-mask';

const MyComponent = () => {
  return (
    <CurrencyInput
      onChangeValue={(event, originalValue, maskedValue) => {
        console.log(event, originalValue, maskedValue);
      }}
    />
  );
};
```

**Example output**

![Output example](https://i.imgur.com/oajugCZ.png)

### Using a custom input (Third Party or your own)

```js
import { CurrencyInput } from 'react-currency-mask';
import { TextField } from '@mui/material';

const MyComponent = () => {
  return (
    <CurrencyInput
      onChangeValue={(event, originalValue, maskedValue) => {
        console.log(event, originalValue, maskedValue);
      }}
      InputElement={<TextField label="Custom Input" size="small" />}
    />
  );
};
```

<u>\*This example uses a MUI TextField</u>

**Example output**

![Output example](https://i.imgur.com/YriLExI.png)

### Integrating with React-Hook-Form Controller

```js
import { CurrencyInput } from 'react-currency-mask';
import { Controller, useFormContext } from 'react-hook-form';

type MyComponentProps = {
  name: string,
};

const MyComponent = ({ name }: MyComponentProps) => {
  const { control } = useFormContext();

  return (
    <Controller
      name={name}
      control={control}
      render={({ field }) => (
        <CurrencyInput
          value={field.value}
          onChangeValue={(_, value) => {
            field.onChange(value);
          }}
          InputElement={<MyCustomInput />}
        />
      )}
    />
  );
};
```

<u>\*Input Element is optional, use it just if you want a custom input</u>

---

## License

react-currency-mask is [MIT licensed](LICENSE).

---

## Thank you and be free to contribute.

---
_Source: https://npm.io/package/react-currency-mask · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._