react-input-mask-br

---

functionality that allows adding or removing mask to string, working with any react library, or html, react, and javascript

Available masks:

CPF | CNPJ | CPFOURCNPJ | RG | PHONE | CURRENCY | POSTALCODE | CREDCARD | OBSCUREEMAIL

Table of Contents

• Installation
• Usage
• Type
• Properties setMask
• Usage sinle
• Exemples

Installation

npm i react-input-mask-br Or yarn add react-input-mask-br

Usage

import {setMask } from "react-input-mask-br";

const maskCPF = setMask({ type: 'cpf', value: '00000000000' });
const maskCNPJ = setMask({ type: 'cnpj', value: '00000000000000' });
const maskRG = setMask({ type: 'rg', value: '000000000' });
const maskPostCode = setMask({ type: 'postalCode', value: '000000000' });
const maskPhone = setMask({ type: 'phone', value: '000000000' });
const maskCPFORCNPJ1 = setMask({ type: 'currency', value: '00000000000' });
const maskCPFORCNPJ2 = setMask({ type: 'cpfOurCnpj', value: '00000000000000' });
const maskCredCard = setMask({ type: 'credCard', value: '0000000000000000' });
const maskCurrency = setMask({ type: 'cpfOurCnpj', value: '100000000' });
const maskCurrency = setMask({ type: 'obscureEmail', value: 'useradmin@outlook.com' });

console.log({
  maskCPF,
  maskCNPJ,
  maskRG,
  maskPostCode,
  maskPhone,
  maskCurrency,
  maskCredCard,
  maskCPFORCNPJ1,
  maskCPFORCNPJ2,
  maskCurrency
});

{
  maskCPF: '000.000.000-00',
  maskCNPJ: '00.000.000.0000-00',
  maskRG: '00.000.000-0',
  maskPostCode: '00000-000',
  maskPhone: '(00) 0 0000-00',
  maskCurrency: '100.000.000',
  maskCredCard: '0000-0000-0000-0000',
  maskCPFORCNPJ1: 'R$ 000.000.000,00',
  maskCPFORCNPJ2: '00.000.000.0000-00'
  maskCurrency: 'u********@outlook.com'
}

const removeCPF = removeMask(maskCPF);
const removeCNPJ = removeMask(maskCNPJ);
const removeRG = removeMask(maskRG);
const removePostalCode = removeMask(maskPostCode);
const removePhone = removeMask(maskPhone);
const removeCurrency = removeMask(maskCurrency);
const removeCred = removeMask(maskCredCard);
const removeCPFORCNPJ1 = removeMask(maskCPFORCNPJ1);
const removeCPFORCNPJ2 = removeMask(maskCPFORCNPJ2);

console.log({
  removeCPF,
  removeCNPJ,
  removeRG,
  removePostalCode,
  removePhone,
  removeCurrency,
  removeCred,
  removeCPFORCNPJ1,
  removeCPFORCNPJ2,
});

{
  removeCPF: '00000000000',
  removeCNPJ: '00000000000000',
  removeRG: '000000000',
  removePostalCode: '00000000',
  removePhone: '000000000',
  removeCurrency: '100000000',
  removeCred: '0000000000000000',
  removeCPFORCNPJ1: '0.00',
  removeCPFORCNPJ2: '00000000000000'
}

Properties setMask

Name	Type	Default	Description
type	{String}		Mask format
value	{String}		string to be formatted
Prefix	{String}		Prefix added after formatted string

Type

| CNPJ | CPFOURCNPJ | RG | PHONE | CURRENCY | POSTALCODE | CREDCARD

Usage single

import {
  cpfMask, cnpjMask, cpfOurCnpjMask, credCardMask, currencyMask, phoneMask, postalCodeMask, rgMask,
} from "react-input-mask-br";

const cpf = cpfMask('00000000000');
const cnpj = cnpjMask('00000000000000');
const cpfOurCnpj1 = cpfOurCnpjMask('00000000000');
const cpfOurCnpj2 = cpfOurCnpjMask('00000000000000');
const currency = currencyMask('00000000000');
const phone = phoneMask('00000000000');
const postalCode = postalCodeMask('00000000000');
const rg = rgMask('000000000');
const credCard = credCardMask('0000000000000000');

console.log({
  cpf, cnpj, cpfOurCnpj1, cpfOurCnpj2, currency, phone, postalCode, rg, credCard,
});

{
  cpf: '000.000.000-00',
  cnpj: '00.000.000.0000-00',
  cpfOurCnpj1: '000.000.000-00',
  cpfOurCnpj2: '00.000.000.0000-00',
  currency: 'R$ 000.000.000,00',
  phone: '(00) 0 0000-0000',
  postalCode: '00000-000',
  rg: '00.000.000-0',
  credCard: '0000-0000-0000-0000'
}

✍️ Authors

• @ReisSouza - Idea & Initial work

See also the list of contributors who participated in this project.

Thanks

Thanks to BrowserStack for the help with testing on real devices