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" />
}