Executando verificação de segurança...
1
g4rcez
1 min de leitura ·

the-mask-input, um jeito simples de fazer máscaras para inputs em React

tl;dr: Exemplos

Contexto

Um tempo atrás tive dificuldade de achar algumas bibliotecas para a construção de máscaras em ReactJS, algumas das bibliotecas eram um pouco mais complexas no uso, outras haviam sido descontinuadas.

Para evitar que os devs acabassem no mesmo problema que eu, criei a biblioteca the-mask-input para auxiliar na criação inputs com formatação, focando na formatação brasileira. Nele você irá encontrar diversas formatações como:

  • CPF
  • CNPJ
  • CPF e CNPJ
  • CEP
  • Telefone
  • Celular
  • Telefone e celular
  • Máscaras customizadas

Como instalar?

Aquele processo básico que você pode fazer copiando o código abaixo

npm install the-mask-input

Como utilizar?

A ideia do the-mask-input é ser um substituto para o input nativo do HTML, podendo ser substituído sem nenhum custo. Caso você queira utilizar as máscaras, basta adicionar o atributo mask

import Input from "the-mask-input";

const App = () => {
    return <Input name="cpf" mask="cpf" />
}
Carregando publicação patrocinada...