React-Lgmt-Input
Este componente cria inputs mascarados para alguns dados utilizados em cadastros aqui no Brasil.
Ele também da uma base para a criação de inputs personalizados com suas próprias máscaras através de expressões regulares e permite determinar uma função de validação para o input.
Para uma demonstração, faça o download e execute yarn start
.
Instalação
$ npm i -S @logicamente.info/react-lgmt-input # NPM user
$ yarn add @logicamente.info/react-lgmt-input # NPM user
Uso
import React from 'react';
import LgmtInput from '@logicamente.info/react-select-brasil';
export default class Demo extends React.Component {
render() {
return (
<LgmtInput.CPF
value={this.state.cpf}
onChange={(e) => this.setState({ cpf: e.target.value })}>
);
}
}
Tipos implementados
Componente | Temática |
---|---|
LgmtInput.CommonInput |
Componente base para a criação de novos componentes input, não é possível renderizar este componente diretamente |
LgmtInput.AgenciaBancaria |
Input formatado para número de agências bancárias |
LgmtInput.BoletoBancário |
Input formatado para números de boletos com 47 dígitos |
LgmtInput.CEP |
Input formatado para CEP brasileiro |
LgmtInput.CNPJ |
Input formatado para número de registro de pessoa jurídica |
LgmtInput.ContaBancaria |
Input formatado para contas bancárias |
LgmtInput.ConvenioBancario |
Input formatado para números de boletos com 48 dígitos (água, luz, telefone...) |
LgmtInput.CPF |
Input formatado para número de registro de pessoa física |
LgmtInput.Documento |
Input formatado para CPF ou CNPJ, adaptando-se de acordo com a quantidade dígitos inseridos |
LgmtInput.Moeda |
Input formatado para valores monetários, com duas casas decimais por padrão (prop digits="2" ) |
LgmtInput.Telefone |
Input formatado para telefones com DDD |
Props
Este componente é um DOM Input padrão do HTML de texto, portanto todas as propriedades de um
input[type="text"] são aplicáveis a este componente como, por exemplo, required
.
Como criar seus próprios inputs
Para criar inputs com suas próprias opções e formatos, crie uma classe que extenda CommonInput
e defina as propriedades conforme tabela a seguir.
Propriedade | Descrição | Exemplo |
---|---|---|
masksRegex |
Demostra através de expressões regulares a evolução da aplicação da máscara |
masksRegex = /(^(\d)|(\d)(\d)|(\d)(\d)(\d)|(\d)(\d)(\d)(\d)$)/g |
masksReplacement |
Informa como os grupos capturados pelas expressões regulares vão compor a máscara |
masksReplacement = ["$2", "$4.$5", "$7.$8.$9", "$11.$12.$12-$13"] |
length |
Tamanho máximo permitido para o input desconsiderando os caracteres da máscara |
length = 4 |
pattern |
Expressão regular que validará o valor final do input depois de aplicada a máscara |
pattern = /^(\d\.){3}\d$/ |
invalidMessage |
Mensagem que será exibida caso o valor do input seja inválido utilizando a validação padrão do HTML5 (anterior ao evento submit ) |
invalidMessage = "Preencha corretamente." |
validator |
Uma função opcional executada durante a validação de pattern que avalia o valor do input para determinar sua validade |
const v = this.state.value
.replace(/\D/g, '')
.split('').map((e) => parseInt(e));
const ultimoDigito = v.pop();
const somaDigitos = v.reduce((acc, cur) => acc + cur);
return somaDigitos === ultimoDigito; |
Exemplo completo de classe
import LgmtInput from '@logicamente.info/react-lgmt-input';
export default class MeuInput extends LgmtInput.CommonInput {
masksRegex = /(^(\d)|(\d)(\d)|(\d)(\d)(\d)|(\d)(\d)(\d)(\d)$)/g;
masksReplacement = ["$2", "$4.$5", "$7.$8.$9", "$11.$12.$12-$13"];
length = 4;
pattern = /^(\d\.){3}\d$/;
invalidMessage = "Preencha corretamente.";
validator: () => {
const v = this.state.value
.replace(/\D/g, '') // remove a mascara
.split('').map((e) => parseInt(e)); // transforma em um vetor de int
const ultimoDigito = v.pop(); // retira o ultimo digito
const somaDigitos = v.reduce((acc, cur) => acc + cur); // soma os tres primeiros
return somaDigitos === ultimoDigito;
}
}