@logicamente.info/react-lgmt-input
v1.1.3
Published
Componente React para criação de inputs formatados e validados para dados pré-definidos utilizados no Brasil
Downloads
4
Maintainers
Readme
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.
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."
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;
}
}