Se hai mai lottato con la gestione dei form in React, sei nel posto giusto.
React Hook Form è una libreria leggera e potente che rende il processo molto più semplice ed efficiente.
Installazione
Per iniziare a utilizzare React Hook Form nel tuo progetto, apri il terminale e installa il modulo direttamente nella tua applicazione:
npm install react-hook-formSe stai utilizzando TypeScript (e ti consiglio vivamente di farlo!), sarai felice di sapere che React Hook Form lo supporta nativamente. Non hai bisogno di installare tipi aggiuntivi.
La libreria fornisce già le sue definizioni di tipo, che ti aiuteranno a scrivere codice più sicuro e a evitare errori comuni.
Iniziamo con un esempio semplice di come utilizzare React Hook Form per creare un form di login:
import { useForm } from "react-hook-form";
function LoginForm() {
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = (data) => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("email", { required: true })} />
{errors.email && <span>Questo campo è obbligatorio</span>}
<input type="password" {...register("password", { required: true, minLength: 6 })} />
{errors.password && <span>La password deve essere lunga almeno 6 caratteri</span>}
<button type="submit">Login</button>
</form>
);
}In questo esempio, vedi come utilizzare le funzioni register e handleSubmit, nonché come gestire gli errori di base. La funzione register è il cuore di React Hook Form: essa registra i campi del form e applica le regole di validazione.
Validazione avanzata
Implementato regole di validazione personalizzate con messaggi di errore specifici. Questa flessibilità ti permette di creare form con validazioni complesse senza dover scrivere logica complicata.
Di seguito, un esepio di validazione di un campo username e di un campo password che, attraverso un pattern, effettua i controlli di validazione opportuni!
import { useForm } from "react-hook-form";
function AdvancedValidationForm() {
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = (data) => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input
{...register("username", {
required: "Username è obbligatorio",
minLength: { value: 4, message: "Minimo 4 caratteri" },
pattern: { value: /^[A-Za-z]+$/i, message: "Solo lettere sono permesse" }
})}
/>
{errors.username && <span>{errors.username.message}</span>}
<input
{...register("email", {
required: "Email è obbligatoria",
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
message: "Indirizzo email non valido"
}
})}
/>
{errors.email && <span>{errors.email.message}</span>}
<button type="submit">Registra</button>
</form>
);
}Osserviamo i valori con Watch
Una delle funzionalità più potenti di React Hook Form è watch. Ti permette di osservare i cambiamenti nei campi del form in tempo reale:
import { useForm } from "react-hook-form";
function WatchExample() {
const { register, watch } = useForm();
const watchedValue = watch("esempio");
return (
<form>
<input {...register("esempio")} />
<p>Valore osservato: {watchedValue}</p>
</form>
);
}Questo è particolarmente utile per creare form e controlli dinamici o per mostrare preview in tempo reale!
Validazione Asincrona
Nel mondo reale, spesso abbiamo bisogno di validare i dati contro un server. React Hook Form rende semplice anche questo, vediamo un esempio:
import { useForm } from "react-hook-form";
function AsyncValidationForm() {
const { register, handleSubmit, formState: { errors } } = useForm();
const validateUsername = async (value) => {
await new Promise(resolve => setTimeout(resolve, 1000));
return value !== "admin" || "Username non disponibile";
};
return (
<form onSubmit={handleSubmit((data) => console.log(data))}>
<input
{...register("username", {
validate: validateUsername
})}
/>
{errors.username && <span>{errors.username.message}</span>}
<button type="submit">Registra</button>
</form>
);
}Questo esempio simula una verifica dell'username sul server, mostrando come gestire validazioni asincrone in modo elegante e pulita!
Reset dei form
A volte, hai bisogno di ripristinare il form ai suoi valori iniziali. React Hook Form lo rende semplice con la funzione reset:
import { useForm } from "react-hook-form";
function ResetForm() {
const { register, handleSubmit, reset } = useForm();
const onSubmit = (data) => {
console.log(data);
reset(); // Resetta il form dopo l'invio
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("firstName")} />
<input {...register("lastName")} />
<button type="submit">Invia</button>
<button type="button" onClick={() => reset()}>Reset</button>
</form>
);
}Questa funzionalità è incredibilmente utile per form che necessitano di essere ripuliti dopo l'invio o su richiesta dell'utente!
Campi Condizionali
Infine, diamo un'occhiata a come gestire campi condizionali:
import { useForm } from "react-hook-form";
function ConditionalForm() {
const { register, watch } = useForm();
const showExtraField = watch("showExtra");
return (
<form>
<input type="checkbox" {...register("showExtra")} />
<label>Mostra campo extra</label>
{showExtraField && (
<input {...register("extraField")} placeholder="Campo extra" />
)}
</form>
);
}I campi condizionali, ci aiutano nel mostrare o nascondere determinati input in base ad altre scelte effettuate nel form stesso! Una funzionalità essenziale per creare form dinamici e interattivi!
React Hook Form trasforma la gestione dei form in React da un compito frustrante a un processo fluido e piacevole. Con la sua API intuitiva e le potenti funzionalità, ti permette di creare form complessi con meno codice e una migliore performance.
Dalla validazione di base a quella asincrona, dalla gestione di campi condizionali al reset del form, questa libreria copre praticamente ogni scenario di gestione dei form in React. E con il suo supporto nativo per TypeScript, offre un'esperienza di sviluppo ancora migliore per chi preferisce la sicurezza dei tipi.
Che tu stia costruendo un semplice form di contatto o un complesso wizard multi-step, React Hook Form ha gli strumenti di cui hai bisogno per rendere il processo più semplice, più veloce e più piacevole!
E tu? Conoscevi React Hook Form? Come costruisci i tuoi form in React?
