@logicamente.info/react-lgmt-input v1.1.3

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

Props

Este componente é um DOM Input padrão do HTML de texto, portanto todas as propriedades de um inputtype="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;
  }

}