Quando estamos desenvolvendo um formulário, existem campos com uma formatação previamente conhecida, como do CEP, telefone, CPF, entre outros. Portanto, saber como usar máscara em React auxilia no desenvolvimento dessas aplicações, além de melhorar a experiência do usuário.
Nesse sentido, saiba neste conteúdo como adicionar máscara em React, acompanhando o passo a passo usado pela nossa equipe.
O que são máscaras?
As máscaras em React são um tipo de formatação no input para facilitar a validação do campo e deixá-lo interativo ao usuário, evitando erros desnecessários.
Portanto, as máscaras não alteram como o dado será tratado, logo, ela não funcionará como uma validação.
Exemplo CPF 01: 000.000.000-00
Se o usuário preencher com números aleatórios 123.456.789-00 ficaria com a formatação de CPF (xxx.xxx.xxx–xx), porém, sem o tratamento necessário seria aprovado, mesmo os dados não sendo válidos.
Exemplo CPF 02: 000.000.000-00 ou 222.222.222-22
Isso ocorre porque o campo não possui o tratamento adequado para validar se o CPF corresponde às condições de ser um CPF válido.
Por que usar máscaras?
Aplicar máscaras em React em campos de formulário limita os usuários com padrões predefinidos. Isso evita o envio de dados incorretos e também deixa mais intuitivo ao usuário.
Poderíamos elaborar nossas próprias funções, fazer a validação das informações e mostrar algum erro após o usuário inserir o valor, mas esse processo leva um tempo desnecessário, sendo que existem libs para aplicação de máscaras que ajudam na formatação dos dados em tempo real.
No post de hoje, você aprenderá como fazer uso dessa ferramenta para aplicar as máscaras no seu campo de formulário da maneira que preferir.
LEIA TAMBÉM
Aplicando as máscaras
Para fins didáticos, trouxe dois exemplos práticos com libs diferentes para a aplicação das máscaras.
Para adicionar máscaras em campos de formulários, será necessário uma aplicação no React, caso já tenha criado, ignore o passo 01.
Passo 01 – Crie uma aplicação em React e entre no arquivo criado.
Após a criação da aplicação será necessário instalar a lib utilizada para adicionar as máscaras.
Passo 02 – Instale a biblioteca react-imask ou react-input-mask
ou
Para utilizar o recurso da lib será necessário importar o componente IMaskInput ou InputMask e chamar no return, criando um controle de entrada que permite apenas o que você limitou na mask.
Passo 03 – Fazer o consumo da lib no seu campo de formulário
3.1 – Caso você tenha instalado a lib react-imask
3.1.1 – Importe o componente IMaskInput e utilize no seu formulário:
Se você estiver utilizando o Form do Bootstrap, saiba que não será necessário elaborar as funções, pois essa lib possui recursos para você fazer uso das máscaras sem problemas.
3.1.2 – Se você estiver usando Bootstrap pode fazer da seguinte forma:
3.2 – Caso você tenha instalado a lib react-input-mask
3.2.1 – Importe o componente InputMask e utilize no seu formulário:
3.2.2 – Se você estiver usando o Bootstrap:
Com base nisso, você poderá aplicar as máscaras conforme suas necessidades.
Observações
As máscaras utilizadas como exemplos são semelhantes, caso uma delas dê problema, você pode consumir a outra sem diferenças aparentes.
Um pequeno adendo seria que, para os usuários que optaram em consumir a lib react-input-mask, deve exemplificar as máscaras com o número 9, pois os demais números seriam limitantes na utilização.
Exemplo: 999.999.999-99, dessa forma será possível que o usuário coloque qualquer número para a aplicação da máscara, porém se você aplicar 999.999.999-21 o usuário não terá condições de colocar qualquer número nos dois dígitos finais, uma vez que você colocou o limitante 21 e sempre será 21.
Enquanto a lib react-imask não possui essa limitação, recomendo utilizar o 0 ou o 9, por motivos visuais.
Conclusão
Dessa forma é possível fazer as validações instantaneamente, sem custo desnecessário de tempo e processamento. Leia com cuidado a documentação sobre máscara em React e escolha a lib que supra seus anseios. Lembre-se que aplicar máscaras não fará a validação do campo.
Gostou das informações? Continue acompanhando os artigos técnicos do nosso blog e aproveite para se cadastrar gratuitamente na nossa plataforma clicando aqui.
