Feat: regra customizada para useInput e useNumber (é possível criar a propria regra de validação)
1.3.0
Feat: agora é possível validar multiplas vezes um mesmo campo com regex
Fix: máscara de CNPJ corrigida
1.2.2
Feat: stepCallbacks (execução de função a cada avanço de etapa)
Feat: maxLength para o hook useInput
1.2.1
Feat: melhorando comportamento de validação
1.2.0
Refactor: Código raiz refatorado para Typescript
Feat: novos hooks useCheckboxGroup, useRadio e useNumber
1.1.3
Fix Correção de pequenos bugs
Feat: Lançamento da feature de steps (formulários em etapa)
1.0.2
Fix: (Essencial) Correção de bugs que impediam o envio de select e checkbox na função handleSubmit
O LX React Form é uma biblioteca brasileira de formulários para React criado em formato de hook.
Leve flexível e com diversas features a disposição, como: validação de diversos tipos de campos (input, checkbox, select), possibilidade de validação com regex, máscaras (padrões e costumizadas) e muito mais.
Instalação
Você pode instalar o LX React Form como um pacote NPM utilizando o comando
import {useInput}from"lx-react-form";constpassword=useInput({name: "password",customValidations: [{regex: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/,error:
"Sua senha precisa conter 8 caracteres, pelo menos uma letra e um número",},],});return(<form><inputtype="password"{...password.inputProps}/>{password.error&&<p>{password.error}</p>}</form>);
É possível criar uma regra customizada de validação
import {useInput}from"lx-react-form";constbatatinha=useInput({name: "batatinha",customRule: {callback: (value)=>{if(value==="batatinha"){returntrue;}else{returnfalse;}},error: 'Este campo não é uma batatinha!'}});return(<form><inputtype="password"{...password.inputProps}/>{password.error&&<p>{password.error}</p>}</form>);
Exemplo alterando errorText
Configurando as mensagens de erro padrão
import {useInput}from"lx-react-form";constpassword=useInput({name: "password",errorText: {required: "This field is required",same: "Confirm password must match with password",minLength: "Password must contain at least 8 characters",},});return(<form><inputtype="password"{...password.inputProps}/>{password.error&&<p>{password.error}</p>}</form>);
Confira todas as opções disponíveis para o hook useNumber
Opções
Obrigatório
Descrição
name
Sim*
O nome do campo é essencial para identificação tanto no HTML quanto no hook useForm
optional
Não
Define se o campo é opcional ou não, padrão false.
min
Não
Número mínimo
max
Não
Número máximo
optional
Não
Define se o campo é opcional ou não, padrão false.
initialValue
Não
Define um valor inicial para o campo
errorText
Não
Permite customizar a mensagens de erro de padrão: required, min e max
customRule
Não
Objeto contendo função callback com regra customizada e mensagem de erro
(useCheckbox) – Validações de checkbox (type checkbox)
Você pode validar checkbox com o hook useCheckbox
import {useCheckbox}from"lx-react-form";constexample=useCheckbox({name: "privacy",});return(<form><labelhtmlFor={example.name}><inputtype="checkbox"{...example.inputProps}/><span>Eu aceito a política de privicidade</span></label>{example.error&&<p>{example.error}</p>}</form>);
Confira abaixo todas as opções disponíveis para o hook useCheckbox
Opções
Obrigatório
Descrição
name
Sim*
O nome do campo é essencial para identificação tanto no HTML quanto no hook useForm
optional
Não
Define se o campo é opcional ou não, padrão false.
initialValue
Não
Define um valor inicial para o campo (precisa ser obrigatoriamente true ou false)
errorText
Não
Permite customizar a mensagens de erro de padrão: required
(useCheckboxGroup) – hook para validar multiplos grupos de checkbox
Você pode validar grupos de checkbox com useCheckboxGroup (considerando o grupo com um único item do formulário)
Confira todas as opções disponíveis para o hook useRadio
Opções
Obrigatório
Descrição
name
Sim*
O nome do campo é essencial para identificação tanto no HTML quanto no hook useForm
optional
Não
Define se o campo é opcional ou não, padrão false.
initialValue
Não
Define um valor inicial para o campo
errorText
Não
Permite customizar a mensagens de erro de padrão: required
(useSelect) – Validações de select
Você pode validar select com o hook useSelect
import {useSelect}from"lx-react-form";constexample=useSelect({name: "ocupation",});return(<form><select{...example.inputProps}><optionvalue="">Selecione uma ocupação</option><optionvalue="pedreiro">Pedreiro</option><optionvalue="padeiro">Padeiro</option></select>{example.error&&<p>{example.error}</p>}</form>);
Confira abaixo todas as opções disponíveis para o hook useSelect
Opções
Obrigatório
Descrição
name
Sim*
O nome do campo é essencial para identificação tanto no HTML quanto no hook useForm
optional
Não
Define se o campo é opcional ou não, padrão false.
initialValue
Não
Define um valor inicial para o campo
errorText
Não
Permite customizar a mensagens de erro de padrão: required
(useForm) – hook para gerar a função de envio dos formulários
O useForm condensa os campos em única lista e executa todas as validações antes de executar a função de envio
Um objeto contendo uma lista de campos para cada etapa do formulário
stepCallbacks
Não
Um objeto contendo um função de callback para cada etapa do formulário
stepMode
Não
No modo onChange, permite que as validações aconteçam (sem notificação de erro) a cada alteração mínima de campo (pode servir para liberar os botões de avançar e enviar somente quando todos os requisitos estiverem preenchidos)
stepClearFieldsOnBack
Não
A função previousStep limpa os campos da etapa respectiva