Máscara de CPF com React + Javascript
Esse tutorial foi inspirado pelo vídeo muito bom do Fernando Daciuk que mostra como fazer máscaras para campos de CPF, CEP, PIS, telefone e CNPJ em Javascript puro. Aqui, vou mostrar a implementação junto com React.
OBS: tenho esse mesmo artigo no meu site se quiser ver por lá é só acessar https://mayconbalves.com.br/
Vamos usar o nosso create-react-app para sermos rápidos e práticos (lembrando que estou supondo que você já conheça como funcionam props, state e exportações do módulos em React).
Vamos criar nosso componente de máscara. É bem tranquilo. Primeiro, vamos criar um arquivo chamado mask.js e vamos fazer nossa função para mascarar nosso input de CPF.
Deixei comentários no código, mas vamos para uma breve explicação:
Linha 1: exportando nossa função. Essa função é bem simples: ela simplesmente recebe um valor e o retorna.
Linha 3: substitui qualquer caractere que não seja número por nada.
Linha 4: captura 2 grupos de numero o primeiro de 3 números (\d{3})e o segundo de 1 número (\d). Após capturar o primeiro grupo de numero $1. ele adiciona um ponto antes do segundo grupo de numero $2.
Linha 6: faz o mesmo replace que as linhas 4 e 5, mas adiciona um - no lugar do ponto.
Linha 7: captura 2 números seguidos de um traço, ou seja, os três últimos caracteres do CPF e não deixa ser digitado mais nada.
Pronto, nossa mascara já pode ser usada. O código do nosso App.js precisa ser atualizado.
Tenho três pequenas explicações no nosso App.js: na linha 3, importamos nossa função. Na linha 15, utilizamos nossa função para formatar o nosso valor e, na linha 24 maxLength=’14', se utilizarmos esse atributo nativo do input (conheça mais algumas aqui) limitamos a quantidade de caracteres que podem ser imputados no nosso input . Logo, não precisamos da última linha na nossa função que mascara o nosso CPF.
Bem é isso, espero que tenham gostado, lembrem que qualquer informação que deixei passar, ou se quiserem adicionar qualquer coisa postem nos comentários. Se esse artigo foi útil e puder me pagar um café ficarei feliz. Abraços quentinhos para vocês !!
