Saiba como adicionar máscara em React na criação de formulários

máscara em react

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.xxxxx), 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 

Como fazer uma to do list em React?

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.

Escrito por Andreyna Carvalho

Sempre levei a tecnologia e a paixão pelos códigos além de uma simples forma de trabalho. Estou focada em me aprofundar e conseguir impactar as pessoas com novas tecnologias. Hoje sou DevRel na Coodesh.

head of people

Confira 7 dicas para se tornar um Head of People de sucesso

desistência da candidatura

Novidades de maio: novo recurso da Coodesh permite ver desistência da candidatura