react-masked

Input and text mask for React

Install

npm install --save react-masked

InputMask

mask prop

import { InputMask } from 'react-masked'

<InputMask mask="999.999.999-99" />

clearIfNotMatch prop

If clearIfNotMatch is true the input will be cleared if the value not match with the mask

import { InputMask } from 'react-masked'

<InputMask mask="999.999.999-99" clearIfNotMatch />

Default patterns:

patterns = {
    '9': new RegExp('[0-9]'),
    'a': new RegExp('[a-z]'),
    'A': new RegExp('[A-Z]'),
    'x': new RegExp('[a-zA-Z]'),
    '*': new RegExp('[a-zA-Z0-9]'),
    '~': new RegExp('[-\+]')
};

pattern	meaning
9	digits (0-9)
a	lowercase letters (a-z)
A	uppercase letters (A-Z)
x	letters uppercase or lowercase (a-z, A-Z)
~	- or +
*	letters or digits (a-z, A-Z, 0-9)
\	cancel next pattern effect

Examples

mask	example
999.999.aaa	113.123.asd
(AA) 999	(AS) 123
999\~	999~

Set new patterns

This add a new pattern, the patterns wont be overwritten

<InputMask mask='999.999.999-aa' patterns={{ a: new RegExp('[0-9]') }} />

example of input: 123.123.123-1122

Add patterns

The patterns will be overwritten

<InputMask mask='aaa.aaa.aaa-aa99' addPatterns={{ a: new RegExp('[0-9]') }} />

example of input: 123.123.123-1199

InputCurrency

Example

import { InputCurrency } from 'react-masked'

<InputCurrency
  precision={4}
  thousand="."
  decimal=","
  prefix="R$"
  suffix="BRL"
/>

the numbers will be formatted like: R$ 1.000,00 BRL

Functions to format strings

example

import { fitToMask } from 'react-masked'

fitToMask('12332112312', '999.999.999-99') // returns '123.321.123-12'

example with custom patterns

import { fitToMask } from 'react-masked'

fitToMask('12332112312', 'aaa.aaa.aaa-aa', { a: new RegExp('[0-9]') }) // returns '123.321.123-12'

License

MIT ©