Material UI (MUI) är ett populärt komponentbibliotek som implementerar Googles materialdesignsystem. Den tillhandahåller ett brett utbud av förbyggda UI-komponenter som du kan använda för att skapa funktionella och visuellt tilltalande gränssnitt.
Även om den är designad för React kan du utöka dess kapacitet till andra ramverk inom Reacts ekosystem, som Next.js.
Innehållsförteckning
Komma igång med React Hook Form och Material UI
Reagera krokform är ett populärt bibliotek som ger ett enkelt och deklarativt sätt att skapa, hantera och validera formulär.
Genom att integrera Material UI UI-komponenter och stilar kan du skapa snygga formulär som är enkla att använda och tillämpa en konsekvent design på din Next.js-applikation.
För att komma igång, skaffa ett Next.js-projekt lokalt. För syftet med den här guiden, installera den senaste versionen av Next.js som använder sig av appkatalogen.
npx create-next-app@latest next-project --app
Installera sedan dessa paket i ditt projekt:
npm install react-hook-form @mui/material @mui/system @emotion/react @emotion/styled
Här är en förhandstitt på vad du kommer att bygga:
Du kan hitta detta projekts kod i denna GitHub förvaret.
Skapa och styla formulär
React Hook Form tillhandahåller en mängd olika verktygsfunktioner, inklusive useForm-kroken.
Denna krok effektiviserar processen för hantering av formulärtillstånd, indatavalidering och inlämning, vilket förenklar de grundläggande aspekterna av formulärhantering.
För att skapa ett formulär som använder denna krok, lägg till följande kod till en ny fil, src/components/form.js.
Lägg först till de nödvändiga importerna för paketen React Hook Form och 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 tillhandahåller en samling färdiga UI-komponenter som du kan anpassa ytterligare genom att skicka stylingrekvisita.
Ändå, om du vill ha mer flexibilitet och kontroll över UI-designen, kan du välja att använda den stiliserade metoden för att utforma dina UI-element med CSS-egenskaper. I det här fallet kan du formatera formulärets huvudkomponenter: huvudbehållaren, själva formuläret och inmatningstextfälten.
Precis under importen lägger du till den här koden:
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%',
});
Att underhålla en modulär kodbas är viktigt i utvecklingen. Av denna anledning, snarare än att klumpa ihop all kod i en enda fil, bör du definiera och utforma anpassade komponenter i separata filer.
På så sätt kan du enkelt importera och använda dessa komponenter i olika delar av din applikation, vilket gör din kod mer organiserad och underhållbar.
Definiera nu den funktionella komponenten:
export default function Form() {
const { register, handleSubmit, formState: { errors } } = useForm();
return (
<>
<FormContainer>
<StyledForm>
<StyledTextField
label="Username"
type="text"
/>
<StyledTextField
label="Password"
type="password"
/>
<MuiButton
type="submit"
variant="contained"
color="primary"
margin="5px"
> Submit </MuiButton>
</StyledForm>
</FormContainer>
</>
);
}
Importera slutligen den här komponenten i din app/page.js-fil. Ta bort all kod för Next.js och uppdatera den med följande:
import Form from 'src/components/Form'export default function Home() {
return (
<main >
<Form />
</main>
)
}
Starta utvecklingsservern och du bör se ett grundläggande formulär med två inmatningsfält och en skicka-knapp i din webbläsare.
Hantering av formulärvalidering
Formen ser bra ut, men den gör ingenting ännu. För att det ska fungera måste du lägga till en valideringskod. useForm hook-verktygsfunktioner kommer väl till pass när du hanterar och validerar användarinmatningar.
Definiera först följande tillståndsvariabel för att hantera den aktuella formulärstatusen, beroende på om en användare har angett rätt autentiseringsuppgifter. Lägg till den här koden i den funktionella komponenten:
const [formStatus, setFormStatus] = useState({ success: false, error: '' });
Skapa sedan en hanterarfunktion för att validera referenserna. Den här funktionen simulerar en HTTP API-begäran som vanligtvis inträffar när klientappar interagerar med ett API för backend-autentisering.
const onSubmit = (data) => {
if (data.username === 'testuser' && data.password === 'password123') {
setFormStatus({ success: true, error: '' });
} else {
setFormStatus({ success: false, error: 'Invalid username or password' });
}
};
Lägg till en onClick-händelsehanterarefunktion till knappkomponenten – skicka den som en rekvisita – för att utlösa onSubmit-funktionen när en användare klickar på knappen Skicka.
onClick={handleSubmit(onSubmit)}
Värdet på tillståndsvariabeln formStatus är viktigt eftersom det kommer att avgöra hur du ger feedback till användaren. Om användaren anger rätt autentiseringsuppgifter kan du visa ett framgångsmeddelande. Om du hade andra sidor i din Next.js-applikation kan du omdirigera dem till en annan sida.
Du bör också ge lämplig feedback om referenserna är felaktiga. Material UI erbjuder en fantastisk feedback-komponent som du kan använda tillsammans med Reacts villkorliga renderingsteknik för att informera användaren, baserat på värdet av formStatus.
För att göra detta, lägg till följande kod precis under StyledForm-öppningstaggen.
{formStatus.success ? (
<Alert severity="success">Form submitted successfully</Alert>
) : formStatus.error ? (
<Alert severity="error">{formStatus.error}</Alert>
) : null}
Nu, för att fånga och validera användarinmatning, kan du använda registerfunktionen för att registrera formulärinmatningsfälten, spåra dess värden och ange valideringsreglerna.
Den här funktionen tar flera argument, inklusive namnet på inmatningsfältet och ett objekt för valideringsparametrar. Detta objekt specificerar valideringsreglerna för inmatningsfältet, såsom det specifika mönstret och minsta längd.
Fortsätt och inkludera följande kod som en rekvisita i användarnamnet StyledTextField-komponenten.
{...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'
},
})}
Lägg nu till följande objekt som en rekvisita i lösenordet StyledTextField-komponenten.
{...register('password', {
required: 'Password required',
minLength: {
value: 8,
message: 'Password must be at least 8 characters'
},
})}
Lägg till följande kod under inmatningsfältet för användarnamn för att ge visuell feedback om indatakrav.
Denna kod kommer att utlösa en varning med ett felmeddelande för att informera användaren om kraven, för att säkerställa att de korrigerar eventuella fel innan formuläret skickas.
{errors.username && <Alert severity="error">{errors.username.message}</Alert>}
Slutligen, inkludera liknande kod precis under lösenordsinmatningstextfältet:
{errors.password && <Alert severity="error">{errors.password.message}</Alert>}
Grymt bra! Med dessa ändringar bör du ha en visuellt tilltalande, funktionell form gjord med React Hook Form och Material UI.
Förbättra din Next.js-utveckling med bibliotek på klientsidan
Material UI och React Hook Form är bara två exempel på de många fantastiska klientsidans bibliotek som du kan använda för att påskynda Next.js frontend-utveckling.
Bibliotek på klientsidan tillhandahåller en mängd produktionsklara funktioner och förbyggda komponenter som kan hjälpa dig att bygga bättre front-end-applikationer snabbare och mer effektivt.