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 ©