Máscara simples para input de número de telefone brasileiro com 8 ou 9 dígitos e DDD
npm install react-telefone-brasileiroEssa biblioteca para React cria um com a máscara ideal para o formato brasileiro dos números de telefone enquanto você digita.
Por padrão é identificado tanto números telefônicos de 8 dígitos, quanto números de 9 dígitos.
Além disso também é possível reconhecer números com DDD.
``shell`
$ npm i react-telefone-brasileiro
Coloque o seguinte import no seu componente:
`JSX`
import TelefoneBrasileiroInput from "react-telefone-brasileiro";
O exemplo abaixo cria um para reconhecer números telefônicos de 8 ou 9 dígitos sem o DDD.
De acordo com as seguintes máscaras: xxxx-xxxx ou xxxxx-xxxx.
`JSX
import React, { useState } from "react";
import ReactDOM from "react-dom";
import TelefoneBrasileiroInput from "react-telefone-brasileiro";
const App = () => {
const [telefone, setTelefone] = useState("");
return (
ReactDOM.render(
`
O exemplo abaixo cria um para reconhecer números telefônicos de 8 ou 9 dígitos com o DDD.
De acordo com as seguintes máscaras: (xx)xxxx-xxxx ou (xx)xxxxx-xxxx.
`JSX
import React, { useState } from "react";
import ReactDOM from "react-dom";
import TelefoneBrasileiroInput from "react-telefone-brasileiro";
const App = () => {
const [telefone, setTelefone] = useState("");
return (
ReactDOM.render(
`
Foi criado também outras máscaras:
- Uma para o formato do nono dígito separado: x xxxx-xxxx ou (xx)x xxxx-xxxx.
Para isso adicione o parâmetro separaNono:
`JSX`
onChange={(event) => setTelefone(ev.target.value);}
separaNono
/>
- E outra para o formato do DDD separado: (xx) xxxx-xxxx ou (xx) xxxxx-xxxx.
Para isso adicione o parâmetro separaDDD:temDDD
> OBS: repare que o parâmetro é obrigatório para esse parâmetro.`
JSX`
onChange={(event) => setTelefone(ev.target.value);}
temDDD
separaDDD
/>
- Você também pode utilizar os dois parâmetros ao mesmo tempo, com isso as máscaras seguem o seguinte formato: (xx) x xxxx-xxxx.
`JSX`
onChange={(event) => setTelefone(ev.target.value);}
separaNono
temDDD
separaDDD
/>
| String | "" | Valor a ser digitado. | |
| onChange | Function(event) | () => {} | event: Evento de entrada do parâmetro onChange.
event.target.value é o valor a ser mascarado. |
| temDDD | Boolean | false | Adiciona campo para a escrita do DDD caso true. |
| separaNono | Boolean | false | Separa o nono dígito dos demais dígitos caso true |
| separaDDD | Boolean | false | Separa o DDD dos demais dígitos caso true |> Você também pode adicionar os parâmetros padrões da tag
como type, required, dentre outros. Bem como do próprio React, como className, ref, etc.
Qualquer parâmetro extra adicionado, será incluído na tag ` a ser gerada.