Material UI (MUI) framstår som ett omtyckt komponentbibliotek, som ger liv åt Googles materialdesignsystem. Det erbjuder en omfattande samling av färdiga UI-komponenter, vilka underlättar skapandet av gränssnitt som är både funktionsdugliga och estetiskt tilltalande.
Även om biblioteket primärt är utformat för React, kan dess funktionalitet utvidgas till andra ramverk inom React-ekosystemet, såsom Next.js.
Börja använda React Hook Form och Material UI
React Hook Form är ett välkänt bibliotek som ger ett enkelt och tydligt sätt att konstruera, hantera och validera formulär.
Genom att integrera Material UI:s UI-komponenter och design, kan du designa stilfulla formulär som är användarvänliga och tillämpar en sammanhängande design i din Next.js-applikation.
För att komma igång, lokalisera ett Next.js-projekt. För detta exempel, installera den senaste versionen av Next.js som använder appkatalogen.
npx create-next-app@latest next-project --app
Installera sedan följande 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 skapa:
Du hittar projektets källkod i detta GitHub-förråd.
Skapa och anpassa formulär
React Hook Form erbjuder en rad praktiska funktioner, inklusive kroken `useForm`.
Denna krok förenklar hanteringen av formulärtillstånd, validering av inmatning och inlämning, och underlättar därmed de grundläggande aspekterna av formulärhantering.
För att konstruera ett formulär med denna krok, lägg till följande kod i en ny fil, `src/components/form.js`.
Börja med att importera nödvändiga paket från 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 rad färdiga UI-komponenter som kan anpassas ytterligare genom att skicka designrelaterade props.
Men om du söker större flexibilitet och kontroll över UI-designen, kan du välja att använda den ”styled” metoden för att utforma dina UI-element med CSS-egenskaper. I detta fall kan du anpassa formulärets huvudelement: den övergripande behållaren, själva formuläret och textinmatningsfälten.
Omedelbart efter importförklaringarna, lägg till följande kod:
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 upprätthålla en modulär kodbas är väsentligt under utveckling. Av denna anledning, istället för att samla all kod i en enda fil, bör du definiera och utforma anpassade komponenter i separata filer.
Detta gör att du enkelt kan importera och återanvända dessa komponenter i olika delar av din applikation, vilket gör din kod mer välordnad och lättare att underhålla.
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>
</>
);
}
Slutligen, importera den här komponenten till din `app/page.js`-fil. Ta bort all befintlig kod och uppdatera den med följande:
import Form from 'src/components/Form'export default function Home() {
return (
<main>
<Form />
</main>
)
}
Starta utvecklingsservern, och du borde se ett grundläggande formulär med två inmatningsfält och en skicka-knapp i din webbläsare.
Hantera formulärvalidering
Formuläret ser bra ut, men det fungerar inte än. För att det ska fungera, måste du lägga till valideringskod. Verktygsfunktionerna `useForm` är oerhört användbara för att hantera och validera användarinmatning.
Först, definiera följande tillståndsvariabel för att spåra formulärets aktuella status, beroende på om en användare har angett korrekta 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, vilket är vanligt när klientapplikationer kommunicerar 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ändelsehanterare till knappkomponenten – skicka den som en prop – för att aktivera `onSubmit`-funktionen när en användare klickar på skicka-knappen.
onClick={handleSubmit(onSubmit)}
Värdet på tillståndsvariabeln `formStatus` är viktigt eftersom det styr hur du ger feedback till användaren. Om användaren anger korrekta autentiseringsuppgifter kan du visa ett meddelande om att det lyckades. Om du har andra sidor i din Next.js-applikation kan du omdirigera dem till en annan sida.
Du bör också ge lämplig feedback om uppgifterna är felaktiga. Material UI erbjuder en utmärkt 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 det, lägg till följande kod direkt under den inledande `StyledForm`-taggen.
{formStatus.success ? (
<Alert severity="success">Form submitted successfully</Alert>
) : formStatus.error ? (
<Alert severity="error">{formStatus.error}</Alert>
) : null}
För att samla in och validera användarinmatning, använd `register`-funktionen för att registrera formulärinmatningsfälten, spåra deras värden och definiera valideringsregler.
Den här funktionen tar emot ett antal argument, inklusive inmatningsfältets namn och ett objekt för valideringsparametrar. Detta objekt specificerar valideringsreglerna för inmatningsfältet, till exempel det specifika mönstret och minsta längd.
Gå vidare och lägg till följande kod som en prop till användarnamnet `StyledTextField`:
{...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 prop i lösenordet `StyledTextField`:
{...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 inmatningskraven.
Den här koden kommer att visa ett varningsmeddelande med ett felmeddelande för att informera användaren om kraven, och säkerställer att de korrigerar eventuella fel innan formuläret skickas.
{errors.username && <Alert severity="error">{errors.username.message}</Alert>}
Slutligen, lägg till liknande kod direkt under textinmatningsfältet för lösenord:
{errors.password && <Alert severity="error">{errors.password.message}</Alert>}
Utmärkt! Med dessa ändringar bör du ha ett visuellt tilltalande och funktionellt formulär, konstruerat med React Hook Form och Material UI.
Förbättra din Next.js-utveckling med klientbibliotek
Material UI och React Hook Form är bara två exempel på de många fantastiska klientbibliotek som du kan använda för att påskynda front-end-utvecklingen i Next.js.
Klientbibliotek erbjuder en mängd produktionsfärdiga funktioner och prefabricerade komponenter, som kan hjälpa dig att bygga bättre front-end-applikationer snabbare och mer effektivt.