Mettez de l'ordre dans vos formulaires grâce à cette combinaison de bibliothèques fonctionnelles et de conception.

Material UI (MUI) est une bibliothèque de composants populaire qui implémente le système Material Design de Google. Il fournit une large gamme de composants d'interface utilisateur prédéfinis que vous pouvez utiliser pour créer des interfaces fonctionnelles et visuellement attrayantes.

Même s'il est conçu pour React, vous pouvez étendre ses capacités à d'autres frameworks au sein de l'écosystème de React, comme Next.js.

Premiers pas avec React Hook Form et Material UI

Forme de crochet de réaction est une bibliothèque populaire qui offre un moyen simple et déclaratif de créer, gérer et valider des formulaires.

En intégrant Interfaces utilisateur matérielles Composants et styles d'interface utilisateur, vous pouvez créer des formulaires attrayants et faciles à utiliser et appliquer une conception cohérente à votre application Next.js.

Pour commencer, échafaudez un projet Next.js localement. Pour les besoins de ce guide, installez le

instagram viewer
dernière version de Next.js qui utilise le répertoire App.

npx create-next-app@latest next-project --app

Ensuite, installez ces packages dans votre projet :

npm install react-hook-form @mui/material @mui/system @emotion/react @emotion/styled

Voici un aperçu de ce que vous allez construire :

Vous pouvez trouver le code de ce projet dans ce GitHub dépôt.

Création et style de formulaires

React Hook Form fournit une variété de fonctions utilitaires, notamment utiliserFormulaire crochet.

Ce hook rationalise le processus de gestion de l'état du formulaire, de validation des entrées et de soumission, simplifiant ainsi les aspects fondamentaux de la gestion des formulaires.

Pour créer un formulaire utilisant ce hook, ajoutez le code suivant à un nouveau fichier, src/components/form.js.

Tout d’abord, ajoutez les importations requises pour les 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 fournit une collection de composants d'interface utilisateur prêts à l'emploi que vous pouvez personnaliser davantage en passant des accessoires de style.

Néanmoins, si vous souhaitez plus de flexibilité et de contrôle sur la conception de l'interface utilisateur, vous pouvez choisir d'utiliser la méthode stylisée pour styliser vos éléments d'interface utilisateur avec des propriétés CSS. Dans ce cas, vous pouvez styliser les principaux composants du formulaire: le conteneur principal, le formulaire lui-même et les champs de texte de saisie.

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 base de code modulaire est important dans le développement. Pour cette raison, plutôt que de regrouper tout le code dans un seul fichier, vous devez définir et styliser les composants personnalisés dans des fichiers séparés.

De cette façon, vous pouvez facilement importer et utiliser ces composants dans différentes parties de votre application, rendant votre code plus organisé et plus maintenable.

Maintenant, définissez le composant fonctionnel :

exportdefaultfunctionForm() {
const { register, handleSubmit, formState: { errors } } = useForm();

return (
 <>


 label="Username"
 type="text"
 />
 label="Password"
 type="password"
 />
 type="submit"
 variant="contained"
 color="primary"
 margin="5px"
 > Submit </MuiButton>
 </StyledForm>
 </FormContainer>
 </>
 );
}

Enfin, importez ce composant dans votre app/page.js déposer. Supprimez tout le code standard Next.js et mettez-le à jour avec ce qui suit :

import Form from'src/components/Form'
exportdefaultfunctionHome() {
return (



 </main>
 )
}

Démarrez le serveur de développement et vous devriez voir un formulaire de base avec deux champs de saisie et un bouton de soumission dans votre navigateur.

Gestion de la validation du formulaire

Le formulaire a fière allure, mais il ne fait encore rien. Pour le rendre fonctionnel, vous devez ajouter du code de validation. utiliserFormulaire les fonctions utilitaires de hook seront utiles lors de la gestion et valider les entrées de l'utilisateur.

Tout d’abord, définissez la variable d’état suivante pour gérer l’état actuel du formulaire, selon qu’un utilisateur a fourni ou non les informations d’identification correctes. Ajoutez ce code à l'intérieur du composant fonctionnel :

const [formStatus, setFormStatus] = useState({ success: false, error: '' });

Ensuite, créez une fonction de gestionnaire pour valider les informations d'identification. Cette fonction simulera une requête API HTTP qui se produit généralement lorsque les applications clientes interagissent avec une API d'authentification backend.

const onSubmit = (data) => {
if (data.username 'testuser' && data.password 'password123') {
 setFormStatus({ success: true, error: '' });
 } else {
 setFormStatus({ success: false, error: 'Invalid username or password' });
 }
};

Ajoutez une fonction de gestionnaire d'événements onClick au composant bouton (en la passant comme accessoire) pour déclencher la fonction onSubmit lorsqu'un utilisateur clique sur le bouton de soumission.

onClick={handleSubmit(onSubmit)}

La valeur du formulaireStatut La variable d'état est importante car elle déterminera la manière dont vous fournissez des commentaires à l'utilisateur. Si l'utilisateur saisit les informations d'identification correctes, vous pouvez afficher un message de réussite. Si vous aviez d'autres pages dans votre application Next.js, vous pouvez les rediriger vers une autre page.

Vous devez également fournir des commentaires appropriés si les informations d'identification sont erronées. Material UI offre un excellent composant de rétroaction que vous pouvez utiliser avec La technique de rendu conditionnel de React pour informer l'utilisateur, en fonction de la valeur de formStatus.

Pour ce faire, ajoutez le code suivant juste en dessous du Forme stylisée balise d'ouverture.

{formStatus.success? (
"success">Form submitted successfully</Alert>
): formStatus.error? (
"error">{formStatus.error}</Alert>
): null}

Désormais, pour capturer et valider les entrées de l'utilisateur, vous pouvez utiliser le registre fonction pour enregistrer les champs de saisie du formulaire, suivre ses valeurs et spécifier les règles de validation.

Cette fonction prend plusieurs arguments, dont le nom du champ de saisie et un objet de paramètres de validation. Cet objet spécifie les règles de validation pour le champ de saisie telles que le modèle spécifique et la longueur minimale.

Allez-y et incluez le code suivant comme accessoire dans le nom d'utilisateur StyledTextField composant.

{...register('username', {
 required: 'Username required',
 pattern: {
 value: /^[a-zA-Z0-9_.-]*$/,
 message: 'Invalid characters used'
 },
 minLength: {
 value: 6,
 message: 'Username must be at least 6 characters'
 },
})}

Maintenant, ajoutez l'objet suivant comme accessoire dans le mot de passeStyledTextField composant.

{...register('password', {
 required: 'Password required',
 minLength: {
 value: 8,
 message: 'Password must be at least 8 characters'
 },
})}

Ajoutez le code suivant sous le champ de saisie du nom d'utilisateur pour fournir un retour visuel sur les exigences de saisie.

Ce code déclenchera une alerte avec un message d'erreur pour informer l'utilisateur des exigences, afin de s'assurer qu'il corrige toute erreur avant de soumettre le formulaire.

{errors.username && <Alertseverity="error">{errors.username.message}Alert>}

Enfin, incluez un code similaire juste en dessous du champ de texte de saisie du mot de passe :

{errors.password && <Alertseverity="error">{errors.password.message}Alert>}

Génial! Avec ces changements, vous devriez avoir un formulaire fonctionnel et visuellement attrayant créé avec 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 des nombreuses excellentes bibliothèques côté client que vous pouvez utiliser pour accélérer le développement de l'interface Next.js.

Les bibliothèques côté client fournissent une variété de fonctionnalités prêtes pour la production et de composants prédéfinis qui peuvent vous aider à créer de meilleures applications frontales plus rapidement et plus efficacement.