Breng uw formulieren op orde met deze combinatie van functionele en ontwerpbibliotheken.

Material UI (MUI) is een populaire componentenbibliotheek die het Material Design-systeem van Google implementeert. Het biedt een breed scala aan vooraf gebouwde UI-componenten die u kunt gebruiken om functionele en visueel aantrekkelijke interfaces te creëren.

Ook al is het ontworpen voor React, je kunt de mogelijkheden ervan uitbreiden naar andere raamwerken binnen het ecosysteem van React, zoals Next.js.

Aan de slag met React Hook Form en materiaal-UI

Reageer haakformulier is een populaire bibliotheek die een eenvoudige en declaratieve manier biedt om formulieren te maken, beheren en valideren.

Door te integreren Materiaal-UI's UI-componenten en -stijlen kunt u mooie formulieren maken die gemakkelijk te gebruiken zijn en een consistent ontwerp toepassen op uw Next.js-toepassing.

Om aan de slag te gaan, moet u een Next.js-project lokaal opzetten. Voor het doel van deze handleiding installeert u de nieuwste versie van Next.js die gebruik maakt van de App-directory.

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

Installeer vervolgens deze pakketten in uw project:

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

Hier is een voorbeeld van wat je gaat bouwen:

U kunt de code van dit project hierin vinden GitHub opslagplaats.

Formulieren maken en vormgeven

React Hook Form biedt een verscheidenheid aan hulpprogramma's, waaronder de gebruikFormulier haak.

Deze hook stroomlijnt het proces van het verwerken van de formulierstatus, invoervalidatie en indiening, waardoor de fundamentele aspecten van formulierbeheer worden vereenvoudigd.

Om een ​​formulier te maken dat gebruik maakt van deze hook, voegt u de volgende code toe aan een nieuw bestand: src/components/form.js.

Voeg eerst de vereiste importen toe voor de React Hook Form- en MUI-pakketten:

"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 biedt een verzameling kant-en-klare UI-componenten die u verder kunt aanpassen door stylinghulpmiddelen door te geven.

Als u echter meer flexibiliteit en controle over het UI-ontwerp wilt, kunt u ervoor kiezen om de opgemaakte methode te gebruiken om uw UI-elementen op te maken met CSS-eigenschappen. In dit geval kunt u de hoofdcomponenten van het formulier opmaken: de hoofdcontainer, het formulier zelf en de invoertekstvelden.

Voeg deze code direct onder de import toe:

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%',
});

Het onderhouden van een modulaire codebase is belangrijk bij de ontwikkeling. Om deze reden moet u, in plaats van alle code in één bestand samen te voegen, aangepaste componenten in afzonderlijke bestanden definiëren en opmaken.

Op deze manier kunt u deze componenten eenvoudig importeren en gebruiken in verschillende delen van uw applicatie, waardoor uw code beter georganiseerd en onderhoudbaar wordt.

Definieer nu de functionele component:

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>
 </>
 );
}

Importeer ten slotte dit onderdeel in uw app/pagina.js bestand. Verwijder alle standaard Next.js-code en update deze met het volgende:

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



 </main>
 )
}

Start de ontwikkelingsserver en u zou een basisformulier met twee invoervelden en een verzendknop in uw browser moeten zien.

Formuliervalidatie afhandelen

Het formulier ziet er geweldig uit, maar doet nog niets. Om het functioneel te maken, moet je wat validatiecode toevoegen. gebruikFormulier hook-hulpprogrammafuncties zullen van pas komen bij het beheren van en het valideren van de gebruikersinvoer.

Definieer eerst de volgende statusvariabele om de huidige formulierstatus te beheren, afhankelijk van of een gebruiker de juiste inloggegevens heeft opgegeven. Voeg deze code toe aan de functionele component:

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

Maak vervolgens een handlerfunctie om de inloggegevens te valideren. Deze functie simuleert een HTTP API-verzoek dat doorgaans plaatsvindt wanneer client-apps communiceren met een backend-authenticatie-API.

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

Voeg een onClick-gebeurtenishandlerfunctie toe aan de knopcomponent (en geef deze door als prop) om de onSubmit-functie te activeren wanneer een gebruiker op de verzendknop klikt.

onClick={handleSubmit(onSubmit)}

De waarde van de formulierStatus state-variabele is belangrijk omdat deze bepaalt hoe u feedback aan de gebruiker geeft. Als de gebruiker de juiste inloggegevens invoert, wordt mogelijk een succesbericht weergegeven. Als u andere pagina's in uw Next.js-toepassing had, kunt u deze omleiden naar een andere pagina.

U moet ook passende feedback geven als de inloggegevens onjuist zijn. Material UI biedt een geweldige feedbackcomponent die u daarnaast kunt gebruiken React's voorwaardelijke weergavetechniek om de gebruiker te informeren, gebaseerd op de waarde van formStatus.

Om dit te doen, voegt u de volgende code direct onder het Gestyled formulier openingslabel.

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

Om gebruikersinvoer vast te leggen en te valideren, kunt u nu de register functie om de formulierinvoervelden te registreren, de waarden ervan bij te houden en de validatieregels te specificeren.

Deze functie heeft verschillende argumenten nodig, waaronder de naam van het invoerveld en een object voor validatieparameters. Dit object specificeert de validatieregels voor het invoerveld, zoals het specifieke patroon en de minimale lengte.

Ga je gang en neem de volgende code op als prop in de gebruikersnaam StyledTextField bestanddeel.

{...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'
 },
})}

Voeg nu het volgende object toe als rekwisiet in het wachtwoordStyledTextField bestanddeel.

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

Voeg de volgende code toe onder het invoerveld voor de gebruikersnaam om visuele feedback te geven over de invoervereisten.

Deze code activeert een waarschuwing met een foutmelding om de gebruiker op de hoogte te stellen van de vereisten, om ervoor te zorgen dat eventuele fouten worden gecorrigeerd voordat het formulier wordt verzonden.

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

Voeg ten slotte soortgelijke code toe direct onder het tekstveld voor het invoeren van het wachtwoord:

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

Geweldig! Met deze wijzigingen zou u een visueel aantrekkelijke, functionele vorm moeten hebben, gemaakt met React Hook Form en Material UI.

Verbeter uw Next.js-ontwikkeling met client-side bibliotheken

Material UI en React Hook Form zijn slechts twee voorbeelden van de vele geweldige client-side bibliotheken die u kunt gebruiken om de frontend-ontwikkeling van Next.js te versnellen.

Client-side bibliotheken bieden een verscheidenheid aan productieklare functies en vooraf gebouwde componenten waarmee u sneller en efficiënter betere front-end-applicaties kunt bouwen.