Introduction
React Hook Form est la bibliothèque la plus populaire pour gérer les formulaires dans React. Elle réduit le re-rendu et simplifie la validation. Ce tutoriel vous apprend à créer un formulaire de contact complet avec TypeScript, validation native et gestion des erreurs. Vous passerez de zéro à un formulaire production-ready en suivant les étapes concrètes.
Prérequis
- Node.js 18+
- React 18+
- Connaissances de base de TypeScript
- Un projet React existant (Vite ou Create React App)
Installation des dépendances
npm install react-hook-form
npm install -D @types/reactOn installe React Hook Form. Le package @types/react est utile pour TypeScript mais souvent déjà présent dans les projets React récents.
Configuration du formulaire de base
Nous allons maintenant créer le composant formulaire. Utilisez le hook useForm pour initialiser le formulaire et récupérer les méthodes register, handleSubmit et formState.
Composant formulaire de contact
import React from 'react';
import { useForm } from 'react-hook-form';
type FormData = {
name: string;
email: string;
message: string;
};
export default function ContactForm() {
const { register, handleSubmit, formState: { errors } } = useForm<FormData>();
const onSubmit = (data: FormData) => {
console.log('Données soumises:', data);
alert('Formulaire envoyé avec succès !');
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register('name', { required: 'Le nom est requis' })} placeholder="Votre nom" />
{errors.name && <p>{errors.name.message}</p>}
<input type="email" {...register('email', { required: 'L\'email est requis' })} placeholder="Votre email" />
{errors.email && <p>{errors.email.message}</p>}
<textarea {...register('message', { required: 'Le message est requis', minLength: { value: 10, message: 'Minimum 10 caractères' } })} placeholder="Votre message" />
{errors.message && <p>{errors.message.message}</p>}
<button type="submit">Envoyer</button>
</form>
);
}Ce code crée un formulaire complet avec trois champs, validation requise et affichage des erreurs. register connecte chaque input au state interne de React Hook Form.
Ajout de la validation email
const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
defaultValues: {
name: '',
email: '',
message: ''
}
});Ajoutez defaultValues pour pré-remplir le formulaire. Cela évite les problèmes de controlled/uncontrolled components.
Gestion de la soumission asynchrone
const onSubmit = async (data: FormData) => {
try {
const response = await fetch('/api/contact', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
});
if (!response.ok) throw new Error('Erreur serveur');
alert('Message envoyé !');
} catch (error) {
alert('Une erreur est survenue');
}
};Rendez la fonction onSubmit asynchrone pour appeler une API. Gérez les erreurs réseau avec try/catch.
Ajout de styles et accessibilité
<input
{...register('email')}
className="border p-2 w-full rounded"
aria-invalid={errors.email ? 'true' : 'false'}
/>Ajoutez des classes Tailwind ou CSS et l'attribut aria-invalid pour améliorer l'accessibilité et le retour visuel des erreurs.
Bonnes pratiques
- Toujours typer FormData avec TypeScript
- Utiliser defaultValues pour éviter les rendus inutiles
- Séparer la logique de validation dans un fichier dédié
- Désactiver le bouton pendant la soumission avec isSubmitting
- Tester le formulaire avec React Testing Library
Erreurs courantes à éviter
- Oublier de passer handleSubmit à onSubmit
- Ne pas typer les données du formulaire
- Utiliser value + onChange manuellement (anti-pattern)
- Ignorer les messages d'erreur dans l'UI
Pour aller plus loin
Découvrez nos formations React avancées pour maîtriser Zod, useFieldArray et les tests de formulaires.