v1.0.4

REFATORAÇÃO COMPLETA + CONTROLLED, UNCONTROLLED E REACT-HOOK-FORMS + NOVOS MÉTODOS + NOVA DOCUMENTAÇÃO

Antes de começarmos com todas as mudanças, que aliás, são muitas, preciso explicar qual o motivo de algo tão radical na maneira e utilização. Vamos tentar lembrar de como utilizávamos antes o Valisk. Se me lembro bem, é preciso declarar o hook, escolhendo a máscara específica que seria utilizada, assim, desestruturando alguns métodos dela, para incrementar no campo de texto e assim, funcionar a lib.

Á primeira vista, da maneira que ela trabalhava, parecia ser boa sua utiilização e na verdade era bem simples de usar, porém, com a sua "simplicidade" e "facilidade de uso", ela trazia diversos problemas.

ilustração de como era utilizado antes:

...

const Input = () => {
   const [value, setValue, isValid, setKey] = useMasksCPF({ useExplictMask: true });

   return 
      (<input 
         value={value} 
         onChange={evt => 
         setValue(evt.target.value)} 
         onKeyDown={evt => setKey(evt.key)}
       />);
}

Principais problemas da antiga lib:

• Campo controlado: O problema aqui é que sempre o componente seria renderizado, sempre mesmo, e só para inserir uma máscara, algo que só por esse motivo, já seria o suficiente para parar de utilizar, isso porque imagine quantas renderizações aconteceriam ao digitar algo como 000.000.000-00.

• Dificuldade de integração com outras libs: Por conta dessa maneira de utilização, a lib ficou muito limitada, praticamente impossível de integrar com qualquer lib, nem mesmo com libs que nem utilizem campos como o foco.

• Dificuldade de componentização: Uma das maiores dores de cabeça era isso, tu não podia estruturar os componentes da maneira que tu quiser pois a lib limitava demais tudo, além das diversas renderizações desnecessárias.

Com isso, vamos para as atualizações:

Enredo

Essa nova lib vem principalmente para resolver todos os problemas anteriores, refatorada de forma completa e com muitas opções de utilização, feita principalmente para ser usada junto com o react-hook-forms, ou até mesmo, sem ele, com a opção de trabalhar de forma CONTROLLED e UNCONTROLLED, de acordo com sua preferência.

Atualmente a linguagem priorizada é o Typescript, principalmente por todos os seus benefícios, mas, é possivel utilizar apenas o javascript para sua utilização

Sintaxe Ilustrativa:

...

const Input = () => {
  interface Inputs {
    campo1: string;
  }

  const { _masks, _forceUpdate, _getValues, _cleanValues } = useValisk<Inputs>({ 
     cpf: { explictMask: true, name: "campo1" } 
  });

  return <input {...mask("campo1")}/>
}

Atualizações

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempor lobortis massa, nec consectetur lectus ultricies eu. Aenean lectus tellus, rhoncus at est ut, rutrum vulputate neque. Ut ultricies semper turpis at lobortis. Curabitur gravida, dui nec finibus aliquam, est nisi maximus libero, sed euismod diam turpis fringilla purus. Fusce vehicula tellus non urna tempus elementum. Aliquam non velit fermentum, gravida leo at, interdum sem. Maecenas sagittis diam non pharetra ultricies. Mauris lacinia at metus pulvinar tempor.

Lista de Atualizações

• Restruturação de todas as pastas;

Dentro da lib, foram refatoradas literalmente todas as pastas, as únicas coisas que foram reutilizadas foram algumas máscaras já prontas, o restante não foi utilizado por estar sem nexo dentro da nova proposta.

• Liberação de códigos desnecessários;

Caso tenha utilizado a lib antiga, você percebeu que o tamanho que antes era gigantesco mudou drásticamente, ficando praticamente do mesmo tamanho que o atual React, após uma baita otimização.

• Incremento de novas funcionalidades;

É possível velas, acima na ilustração, cada uma delas possuem uma finalidade que é explicada com detalhes dentro da documentação, porém de maneira geral:

1. _masks: Gerar a máscara;
2. _forceUpdate: Realizar uma mudança no valor sem causar uma renderização, usado para valores inicias com máscara, por exemplo;
3. _getValues: Mesma coisa que o handleSubmit do react-hook-form, foi uma alternativa, caso seja utilizado a lib sem a outra.
4. _cleanValues: Limpa todas as máscara dos valores, basta passar o dado obtido.

• Possibilidade de diversidade para trabalhar com a lib;

Aqui é o momento onde a lib mais brilha, realizando uma junção perfeita com outras libs, especialmente com o tão falado react-hook-form, com ele é possivel reutilizar todas as funcionalidades e ainda incrementar novas, por isso, super recomendo a integração.

• Tipagens e facilidade de uso;

Junto com a reestruturação, acabei criando novas tipagens para melhorar a utilização em variados casos de uso.

• Possiblidade de utilização com js e ts;

Assim como praticamente todas libs, é possivel escolher uma das duas linguagens, mas fortemente recomendo typescript

Considerações Finais

Com essa nova lib, tenho certeza que a expêriencia será completamente diferente da anterior, com muitas novas possibilidades e incrementos que serão possiveis. Além disso, no futuro próximo será lançada uma nova versão com um patch de melhorias e novas funcionalidades para melhorar ainda mais o que já está bom.