Material UI (MUI) se présente comme une bibliothèque de composants largement adoptée, matérialisant le système de design de Google, Material Design. Elle offre une pléthore de composants d’interface utilisateur préconçus, permettant la création d’interfaces à la fois fonctionnelles et esthétiquement plaisantes.
Bien que spécifiquement conçue pour React, ses capacités s’étendent à d’autres frameworks au sein de l’écosystème React, notamment Next.js.
Premiers pas avec React Hook Form et Material UI
React Hook Form est une bibliothèque reconnue pour sa capacité à simplifier la création, la gestion et la validation de formulaires de manière déclarative.
L’intégration des composants et des styles d’interface utilisateur de Material UI permet de concevoir des formulaires attrayants et conviviaux, tout en assurant une homogénéité de design au sein de votre application Next.js.
Pour initier le processus, il est nécessaire de mettre en place un projet Next.js localement. Dans le cadre de ce tutoriel, l’installation de la dernière version de Next.js, utilisant le répertoire App, est préconisée.
npx create-next-app@latest next-project --app
Par la suite, installez les packages nécessaires à votre projet :
npm install react-hook-form @mui/material @mui/system @emotion/react @emotion/styled
Voici un aperçu de la structure de ce que vous allez créer :
Vous trouverez le code source de ce projet sur ce dépôt GitHub.
Création et mise en forme des formulaires
React Hook Form propose diverses fonctions utilitaires, dont le hook useForm.
Ce hook a pour effet de rationaliser la gestion de l’état du formulaire, la validation des entrées et la soumission, simplifiant ainsi les aspects fondamentaux de la gestion des formulaires.
Pour créer un formulaire à l’aide de ce hook, ajoutez le code suivant dans un nouveau fichier, nommé src/components/form.js.
Commencez par importer les éléments requis des packages React Hook Form et MUI :
"use client"
import React, {useState} from 'react';
import { useForm } from 'react-hook-form';
import { TextField, Button as MuiButton, Alert } from '@mui/material';
import { styled } from '@mui/system';
MUI met à disposition une gamme de composants d’interface utilisateur prêts à l’emploi, pouvant être personnalisés via des accessoires de style.
Néanmoins, pour une plus grande flexibilité et un contrôle accru sur l’apparence de l’interface utilisateur, il est possible de recourir à la méthode stylisée pour personnaliser les éléments d’interface utilisateur en utilisant des propriétés CSS. Dans ce cas, vous pouvez mettre en forme les principaux éléments du formulaire : le conteneur principal, le formulaire lui-même, ainsi que les champs de texte.
Juste en dessous des importations, ajoutez ce code :
const FormContainer = styled('div')({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100vh',
});const StyledForm = styled('form')({
width: '80%',
maxWidth: '400px',
padding: '20px',
borderRadius: '10px',
border: '2px solid #1E3A8A',
boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.2)',
backgroundColor: '#ffffff',
textAlign: 'center',
});
const StyledTextField = styled(TextField)({
marginBottom: '16px',
width: '100%',
});
Le maintien d’une structure de code modulaire est primordial lors du développement. De ce fait, plutôt que de concentrer tout le code dans un seul fichier, il est conseillé de définir et de styliser les composants personnalisés dans des fichiers distincts.
Cette pratique facilite l’importation et l’utilisation de ces composants dans diverses parties de votre application, garantissant ainsi un code plus structuré et maintenable.
À présent, définissez le composant fonctionnel :
export default function Form() {
const { register, handleSubmit, formState: { errors } } = useForm();
return (
<>
<FormContainer>
<StyledForm>
<StyledTextField
label="Nom d'utilisateur"
type="text"
/>
<StyledTextField
label="Mot de passe"
type="password"
/>
<MuiButton
type="submit"
variant="contained"
color="primary"
margin="5px"
> Soumettre </MuiButton>
</StyledForm>
</FormContainer>
</>
);
} Finalement, importez ce composant dans votre fichier app/page.js. Supprimez le code Next.js par défaut et remplacez-le par ce qui suit :
import Form from 'src/components/Form'export default function Home() {
return (
<main >
<Form />
</main>
)
}
Lancez le serveur de développement et un formulaire basique, comprenant deux champs de saisie et un bouton de soumission, devrait être visible dans votre navigateur.
Gestion de la validation du formulaire
Le formulaire présente un aspect visuellement réussi, mais il reste inactif. Pour le rendre fonctionnel, il est impératif d’intégrer un code de validation. Les fonctions utilitaires offertes par le hook useForm s’avèreront utiles pour la gestion et la validation des données saisies par l’utilisateur.
Dans un premier temps, déclarez la variable d’état suivante pour contrôler l’état du formulaire, selon que l’utilisateur a fourni ou non les identifiants corrects. Insérez ce code au sein du composant fonctionnel :
const [formStatus, setFormStatus] = useState({ success: false, error: '' }); Ensuite, mettez en place une fonction gestionnaire destinée à la validation des identifiants. Cette fonction simulera une requête API HTTP, une interaction typique entre les applications clientes et une API d’authentification dorsale.
const onSubmit = (data) => {
if (data.username === 'testuser' && data.password === 'password123') {
setFormStatus({ success: true, error: '' });
} else {
setFormStatus({ success: false, error: 'Nom d\'utilisateur ou mot de passe incorrect' });
}
}; Ajoutez une fonction de gestionnaire d’événements onClick au composant bouton (en la passant comme accessoire) pour exécuter la fonction onSubmit lorsqu’un utilisateur clique sur le bouton de soumission.
onClick={handleSubmit(onSubmit)} La valeur de la variable d’état formStatus est cruciale, car elle déterminera la manière dont vous communiquerez avec l’utilisateur. En cas de saisie correcte des identifiants, un message de succès sera affiché. Si d’autres pages étaient intégrées à votre application Next.js, une redirection vers une autre page serait possible.
Il est également essentiel de fournir un retour approprié lorsque les identifiants sont erronés. Material UI propose un excellent composant de rétroaction, utilisable avec la technique de rendu conditionnel de React afin d’informer l’utilisateur, en fonction de la valeur de formStatus.
Pour ce faire, ajoutez le code suivant juste en dessous de la balise d’ouverture StyledForm.
{formStatus.success ? (
<Alert severity="success">Formulaire soumis avec succès</Alert>
) : formStatus.error ? (
<Alert severity="error">{formStatus.error}</Alert>
) : null} Désormais, pour saisir et valider les données saisies par l’utilisateur, vous pouvez exploiter la fonction d’enregistrement afin d’enregistrer les champs de saisie du formulaire, de surveiller leurs valeurs et de spécifier les règles de validation.
Cette fonction accepte différents arguments, parmi lesquels le nom du champ de saisie et un objet de paramètres de validation. Cet objet spécifie les règles de validation du champ de saisie, telles que le modèle spécifique et la longueur minimale.
Procédez en intégrant le code suivant comme accessoire dans le composant de nom d’utilisateur StyledTextField.
{...register('username', {
required: 'Nom d\'utilisateur requis',
pattern: {
value: /^[a-zA-Z0-9_.-]*$/,
message: 'Caractères non valides utilisés'
},
minLength: {
value: 6,
message: 'Le nom d\'utilisateur doit comporter au moins 6 caractères'
},
})} Ajoutez à présent l’objet suivant comme accessoire dans le composant de mot de passe StyledTextField.
{...register('password', {
required: 'Mot de passe requis',
minLength: {
value: 8,
message: 'Le mot de passe doit comporter au moins 8 caractères'
},
})} Insérez le code suivant sous le champ de saisie du nom d’utilisateur afin de fournir un retour visuel sur les exigences de saisie.
Ce code affichera une alerte contenant un message d’erreur informant l’utilisateur des exigences, s’assurant ainsi qu’il corrige toute erreur avant de soumettre le formulaire.
{errors.username && <Alert severity="error">{errors.username.message}</Alert>} Enfin, ajoutez un code similaire juste en dessous du champ de texte de saisie du mot de passe :
{errors.password && <Alert severity="error">{errors.password.message}</Alert>}
Parfait ! Grâce à ces modifications, vous devriez disposer d’un formulaire fonctionnel et attrayant, créé à l’aide de React Hook Form et Material UI.
Améliorez votre développement Next.js avec les bibliothèques côté client
Material UI et React Hook Form ne sont que deux exemples parmi les nombreuses bibliothèques côté client de qualité que vous pouvez exploiter pour accélérer le développement de l’interface de Next.js.
Les bibliothèques côté client offrent une panoplie de fonctionnalités prêtes pour la production et de composants préconçus, qui peuvent vous aider à créer des applications frontales plus performantes, plus rapidement et avec une efficacité accrue.