Material UI (MUI) este o bibliotecă de componente populară care implementează sistemul Google Material Design. Oferă o gamă largă de componente UI pre-construite pe care le puteți folosi pentru a crea interfețe funcționale și atractive vizual.
Chiar dacă este conceput pentru React, îi puteți extinde capacitățile la alte cadre din ecosistemul React, cum ar fi Next.js.
Cuprins
Noțiuni introductive cu React Hook Form și Material UI
React Hook Form este o bibliotecă populară care oferă o modalitate simplă și declarativă de a crea, gestiona și valida formulare.
Prin integrare UI-uri materiale Componente și stiluri ale interfeței de utilizare, puteți crea formulare arătoase, ușor de utilizat și puteți aplica un design consistent aplicației dvs. Next.js.
Pentru a începe, construiți un proiect Next.js local. În scopul acestui ghid, instalați cea mai recentă versiune a Next.js care utilizează directorul App.
npx create-next-app@latest next-project --app
Apoi, instalați aceste pachete în proiectul dvs.:
npm install react-hook-form @mui/material @mui/system @emotion/react @emotion/styled
Iată o previzualizare a ceea ce vei construi:
Puteți găsi codul acestui proiect în aceasta GitHub repertoriu.
Crearea și stilizarea formularelor
React Hook Form oferă o varietate de funcții utilitare, inclusiv cârligul useForm.
Acest cârlig eficientizează procesul de gestionare a stării formularelor, de validare a intrărilor și de trimitere, simplificând aspectele fundamentale ale gestionării formularelor.
Pentru a crea un formular care folosește acest cârlig, adăugați următorul cod într-un fișier nou, src/components/form.js.
Mai întâi, adăugați importurile necesare pentru pachetele React Hook Form și 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 oferă o colecție de componente UI gata de utilizare pe care le puteți personaliza în continuare prin trecerea elementelor de recuzită pentru stil.
Cu toate acestea, dacă doriți mai multă flexibilitate și control asupra designului interfeței de utilizator, puteți opta pentru a utiliza metoda de stil pentru a vă stila elementele de interfață cu proprietăți CSS. În acest caz, puteți stila componentele principale ale formularului: containerul principal, formularul în sine și câmpurile de text de intrare.
Chiar sub importuri, adăugați acest cod:
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%',
});
Menținerea unei baze de cod modulare este importantă în dezvoltare. Din acest motiv, în loc să grupați tot codul într-un singur fișier, ar trebui să definiți și să stilați componentele personalizate în fișiere separate.
În acest fel, puteți importa și utiliza cu ușurință aceste componente în diferite părți ale aplicației dvs., făcând codul mai organizat și mai ușor de întreținut.
Acum, definiți componenta funcțională:
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>
</>
);
}
În cele din urmă, importați această componentă în fișierul dvs. app/page.js. Ștergeți tot codul boilerplate Next.js și actualizați-l cu următoarele:
import Form from 'src/components/Form'export default function Home() {
return (
<main >
<Form />
</main>
)
}
Porniți serverul de dezvoltare și ar trebui să vedeți un formular de bază cu două câmpuri de introducere și un buton de trimitere în browser.
Gestionarea validării formularelor
Forma arată grozav, dar încă nu face nimic. Pentru a-l face funcțional, trebuie să adăugați un cod de validare. Funcțiile utilitare useForm hook vor fi utile atunci când gestionați și validați intrările utilizatorului.
Mai întâi, definiți următoarea variabilă de stare pentru a gestiona starea curentă a formularului, în funcție de dacă un utilizator a furnizat acreditările corecte. Adăugați acest cod în interiorul componentei funcționale:
const [formStatus, setFormStatus] = useState({ success: false, error: '' });
Apoi, creați o funcție de gestionare pentru a valida acreditările. Această funcție va simula o solicitare HTTP API care apare de obicei atunci când aplicațiile client interacționează cu un API de autentificare backend.
const onSubmit = (data) => {
if (data.username === 'testuser' && data.password === 'password123') {
setFormStatus({ success: true, error: '' });
} else {
setFormStatus({ success: false, error: 'Invalid username or password' });
}
};
Adăugați o funcție de gestionare a evenimentelor onClick la componenta butonului – trecând-o ca prop – pentru a declanșa funcția onSubmit atunci când un utilizator face clic pe butonul de trimitere.
onClick={handleSubmit(onSubmit)}
Valoarea variabilei de stare formStatus este importantă deoarece va determina modul în care oferiți feedback utilizatorului. Dacă utilizatorul introduce acreditările corecte, este posibil să afișați un mesaj de succes. Dacă ați avut alte pagini în aplicația dvs. Next.js, le puteți redirecționa către o altă pagină.
De asemenea, ar trebui să oferiți feedback adecvat dacă acreditările sunt greșite. Material UI oferă o componentă excelentă de feedback pe care o puteți folosi alături de tehnica de randare condiționată a React pentru a informa utilizatorul, pe baza valorii formStatus.
Pentru a face acest lucru, adăugați următorul cod chiar sub eticheta de deschidere StyledForm.
{formStatus.success ? (
<Alert severity="success">Form submitted successfully</Alert>
) : formStatus.error ? (
<Alert severity="error">{formStatus.error}</Alert>
) : null}
Acum, pentru a captura și valida intrarea utilizatorului, puteți utiliza funcția de înregistrare pentru a înregistra câmpurile de introducere a formularului, pentru a urmări valorile acestora și pentru a specifica regulile de validare.
Această funcție preia mai multe argumente, inclusiv numele câmpului de intrare și un obiect de parametri de validare. Acest obiect specifică regulile de validare pentru câmpul de intrare, cum ar fi modelul specific și lungimea minimă.
Continuați și includeți următorul cod ca suport în componenta StyledTextField pentru numele de utilizator.
{...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'
},
})}
Acum, adăugați următorul obiect ca suport în componenta StyledTextField de parolă.
{...register('password', {
required: 'Password required',
minLength: {
value: 8,
message: 'Password must be at least 8 characters'
},
})}
Adăugați următorul cod sub câmpul de introducere a numelui de utilizator pentru a oferi feedback vizual cu privire la cerințele de introducere.
Acest cod va declanșa o alertă cu un mesaj de eroare pentru a informa utilizatorul despre cerințe, pentru a se asigura că corectează orice erori înainte de a trimite formularul.
{errors.username && <Alert severity="error">{errors.username.message}</Alert>}
În cele din urmă, includeți un cod similar chiar sub câmpul text de introducere a parolei:
{errors.password && <Alert severity="error">{errors.password.message}</Alert>}
Minunat! Cu aceste modificări, ar trebui să aveți o formă funcțională atrăgătoare din punct de vedere vizual, realizată cu React Hook Form și Material UI.
Îmbunătățiți-vă dezvoltarea Next.js cu biblioteci pe partea clientului
Material UI și React Hook Form sunt doar două exemple ale numeroaselor biblioteci excelente pe partea client pe care le puteți folosi pentru a accelera dezvoltarea front-end Next.js.
Bibliotecile la nivelul clientului oferă o varietate de caracteristici pregătite pentru producție și componente prefabricate care vă pot ajuta să construiți aplicații front-end mai bune, mai rapid și mai eficient.