Material UI (MUI) er et populært komponentbibliotek som implementerer Googles materialdesignsystem. Det gir et bredt spekter av forhåndsbygde UI-komponenter som du kan bruke til å lage funksjonelle og visuelt tiltalende grensesnitt.
Selv om den er designet for React, kan du utvide funksjonene til andre rammeverk innenfor Reacts økosystem, som Next.js.
Innholdsfortegnelse
Komme i gang med React Hook Form og Material UI
React Hook Form er et populært bibliotek som gir en enkel og deklarativ måte å opprette, administrere og validere skjemaer på.
Ved å integrere Materiale UI UI-komponenter og stiler, kan du lage flotte skjemaer som er enkle å bruke, og bruke et konsistent design på Next.js-applikasjonen din.
For å komme i gang, stillas et Next.js-prosjekt lokalt. For formålet med denne veiledningen, installer den nyeste versjonen av Next.js som bruker appkatalogen.
npx create-next-app@latest next-project --app
Installer deretter disse pakkene i prosjektet ditt:
npm install react-hook-form @mui/material @mui/system @emotion/react @emotion/styled
Her er en forhåndsvisning av hva du skal bygge:
Du finner dette prosjektets kode i denne GitHub oppbevaringssted.
Opprette og style skjemaer
React Hook Form gir en rekke verktøyfunksjoner, inkludert useForm-kroken.
Denne kroken effektiviserer prosessen med å håndtere skjemastatus, inndatavalidering og innsending, og forenkler de grunnleggende aspektene ved skjemabehandling.
For å lage et skjema som bruker denne kroken, legg til følgende kode i en ny fil, src/components/form.js.
Først legger du til de nødvendige importene for React Hook Form og MUI-pakkene:
"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 gir en samling klare til bruk UI-komponenter som du kan tilpasse ytterligere ved å sende stylingrekvisitter.
Ikke desto mindre, hvis du vil ha mer fleksibilitet og kontroll over UI-designet, kan du velge å bruke den stilede metoden for å style UI-elementene dine med CSS-egenskaper. I dette tilfellet kan du style hovedkomponentene i skjemaet: hovedbeholderen, selve skjemaet og inndatafeltene.
Rett under importen legger du til denne 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%',
});
Å opprettholde en modulær kodebase er viktig i utviklingen. Av denne grunn, i stedet for å klumpe all koden i en enkelt fil, bør du definere og style tilpassede komponenter i separate filer.
På denne måten kan du enkelt importere og bruke disse komponentene på tvers av ulike deler av applikasjonen din, noe som gjør koden mer organisert og vedlikeholdbar.
Definer nå den funksjonelle 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>
</>
);
}
Til slutt importerer du denne komponenten til app/page.js-filen din. Slett all boilerplate Next.js-koden og oppdater den med følgende:
import Form from 'src/components/Form'export default function Home() {
return (
<main >
<Form />
</main>
)
}
Start utviklingsserveren, og du skal se et grunnleggende skjema med to inndatafelt og en send-knapp i nettleseren din.
Håndtering av skjemavalidering
Formen ser flott ut, men den gjør ingenting ennå. For å gjøre det funksjonelt, må du legge til en valideringskode. useForm hook-verktøyfunksjoner vil komme godt med når du administrerer og validerer brukerinndata.
Først definerer du følgende tilstandsvariabel for å administrere gjeldende skjemastatus, avhengig av om en bruker har oppgitt riktig påloggingsinformasjon. Legg til denne koden i den funksjonelle komponenten:
const [formStatus, setFormStatus] = useState({ success: false, error: '' });
Deretter oppretter du en behandlerfunksjon for å validere legitimasjonen. Denne funksjonen vil simulere en HTTP API-forespørsel som vanligvis oppstår når klientapper samhandler med en backend-autentiserings-API.
const onSubmit = (data) => {
if (data.username === 'testuser' && data.password === 'password123') {
setFormStatus({ success: true, error: '' });
} else {
setFormStatus({ success: false, error: 'Invalid username or password' });
}
};
Legg til en onClick-hendelsesbehandlingsfunksjon til knappekomponenten – legg den til som en rekvisitt – for å utløse onSubmit-funksjonen når en bruker klikker på send-knappen.
onClick={handleSubmit(onSubmit)}
Verdien av tilstandsvariabelen formStatus er viktig fordi den vil avgjøre hvordan du gir tilbakemelding til brukeren. Hvis brukeren oppgir riktig legitimasjon, kan du vise en suksessmelding. Hvis du hadde andre sider i Next.js-applikasjonen din, kan du omdirigere dem til en annen side.
Du bør også gi passende tilbakemelding hvis legitimasjonen er feil. Material UI tilbyr en flott tilbakemeldingskomponent som du kan bruke sammen med Reacts betingede gjengivelsesteknikk for å informere brukeren, basert på verdien av formStatus.
For å gjøre dette, legg til følgende kode rett under StyledForm-åpningskoden.
{formStatus.success ? (
<Alert severity="success">Form submitted successfully</Alert>
) : formStatus.error ? (
<Alert severity="error">{formStatus.error}</Alert>
) : null}
Nå, for å fange opp og validere brukerinndata, kan du bruke registerfunksjonen til å registrere skjemainndatafeltene, spore verdiene og spesifisere valideringsreglene.
Denne funksjonen tar flere argumenter, inkludert navnet på inndatafeltet og et valideringsparameterobjekt. Dette objektet spesifiserer valideringsreglene for inndatafeltet, for eksempel det spesifikke mønsteret og minimumslengden.
Gå videre og inkluder følgende kode som en rekvisitt i brukernavnet 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'
},
})}
Legg nå til følgende objekt som en rekvisitt i passordet StyledTextField-komponenten.
{...register('password', {
required: 'Password required',
minLength: {
value: 8,
message: 'Password must be at least 8 characters'
},
})}
Legg til følgende kode under inndatafeltet for brukernavn for å gi visuell tilbakemelding om inndatakrav.
Denne koden vil utløse et varsel med en feilmelding for å informere brukeren om kravene, for å sikre at de retter opp eventuelle feil før skjemaet sendes inn.
{errors.username && <Alert severity="error">{errors.username.message}</Alert>}
Til slutt, ta med lignende kode rett under passordinntastingstekstfeltet:
{errors.password && <Alert severity="error">{errors.password.message}</Alert>}
Rått! Med disse endringene bør du ha en visuelt tiltalende, funksjonell form laget med React Hook Form og Material UI.
Forbedre Next.js-utviklingen din med biblioteker på klientsiden
Material UI og React Hook Form er bare to eksempler på de mange flotte klientsidebibliotekene du kan bruke for å fremskynde Next.js frontend-utvikling.
Biblioteker på klientsiden tilbyr en rekke produksjonsklare funksjoner og forhåndsbygde komponenter som kan hjelpe deg med å bygge bedre front-end-applikasjoner raskere og mer effektivt.