Skip to content

rafaelcorradini/react-masked

Repository files navigation

react-masked

Input and text mask for React

NPM GitHub license Build Status Coverage Status

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 ©