Material UI (MUI) — популярна бібліотека компонентів, яка реалізує систему Google Material Design. Він надає широкий спектр готових компонентів інтерфейсу користувача, які можна використовувати для створення функціональних і візуально привабливих інтерфейсів.
Незважаючи на те, що він розроблений для React, ви можете розширити його можливості на інші фреймворки в екосистемі React, наприклад Next.js.
Початок роботи з React Hook Form і Material UI
Форма React Hook це популярна бібліотека, яка забезпечує простий і декларативний спосіб створення, керування та перевірки форм.
Шляхом інтеграції Інтерфейс матеріалу Компоненти і стилі інтерфейсу користувача, ви можете створювати гарні форми, які прості у використанні, і застосовувати узгоджений дизайн до програми Next.js.
Щоб розпочати, створіть проект Next.js локально. Для цілей цього посібника встановіть останню версію Next.js, яка використовує каталог App.
npx create-next-app@latest next-project --app
Далі встановіть ці пакети у свій проект:
npm install react-hook-form @mui/material @mui/system @emotion/react @emotion/styled
Ось попередній перегляд того, що ви будете будувати:
Ви можете знайти код цього проекту тут GitHub сховище.
Створення та стилізація форм
React Hook Form надає різноманітні корисні функції, включаючи хук useForm.
Цей хук спрощує процес обробки стану форми, перевірки введення та подання, спрощуючи основні аспекти керування формами.
Щоб створити форму, яка використовує цей хук, додайте наступний код до нового файлу src/components/form.js.
Спочатку додайте необхідні імпорти для React Hook Form і пакетів 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 надає колекцію готових до використання компонентів інтерфейсу користувача, які можна додатково налаштувати, передавши атрибути стилю.
Тим не менш, якщо вам потрібна більша гнучкість і контроль над дизайном інтерфейсу користувача, ви можете використовувати метод styled для стилізації елементів інтерфейсу користувача за допомогою властивостей CSS. У цьому випадку можна стилізувати основні компоненти форми: основний контейнер, саму форму та поля введення тексту.
Прямо під імпортом додайте цей код:
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%',
});
Підтримка модульної кодової бази є важливою у розробці. З цієї причини, замість того, щоб об’єднувати весь код в один файл, ви повинні визначати та стилізувати спеціальні компоненти в окремих файлах.
Таким чином, ви можете легко імпортувати та використовувати ці компоненти в різних частинах вашої програми, роблячи ваш код більш організованим і зручним для обслуговування.
Тепер визначте функціональний компонент:
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>
</>
);
}
Нарешті, імпортуйте цей компонент у свій файл app/page.js. Видаліть увесь шаблонний код Next.js і оновіть його за допомогою такого:
import Form from 'src/components/Form'export default function Home() {
return (
<main >
<Form />
</main>
)
}
Запустіть сервер розробки, і ви побачите базову форму з двома полями введення та кнопкою надсилання у вашому браузері.
Обробка перевірки форми
Форма виглядає чудово, але вона ще нічого не робить. Щоб зробити його функціональним, вам потрібно додати код перевірки. Допоміжні функції підключення useForm стануть у нагоді під час керування та перевірки введених користувачем даних.
По-перше, визначте наступну змінну стану для керування поточним станом форми залежно від того, чи надав користувач правильні облікові дані. Додайте цей код у функціональний компонент:
const [formStatus, setFormStatus] = useState({ success: false, error: '' });
Далі створіть функцію обробки для перевірки облікових даних. Ця функція імітує запит HTTP API, який зазвичай виникає, коли клієнтські програми взаємодіють із серверним API автентифікації.
const onSubmit = (data) => {
if (data.username === 'testuser' && data.password === 'password123') {
setFormStatus({ success: true, error: '' });
} else {
setFormStatus({ success: false, error: 'Invalid username or password' });
}
};
Додайте функцію обробки подій onClick до компонента кнопки, передавши її як проп, щоб запускати функцію onSubmit, коли користувач натискає кнопку відправки.
onClick={handleSubmit(onSubmit)}
Значення змінної стану formStatus є важливим, оскільки воно визначатиме, як ви надасте зворотній зв’язок користувачеві. Якщо користувач вводить правильні облікові дані, ви можете показати повідомлення про успішне виконання. Якщо у вашому додатку Next.js є інші сторінки, ви можете перенаправити їх на іншу сторінку.
Ви також повинні надати відповідний відгук, якщо облікові дані неправильні. Інтерфейс Material UI пропонує чудовий компонент зворотного зв’язку, який ви можете використовувати разом із технікою умовного відтворення React, щоб інформувати користувача на основі значення formStatus.
Для цього додайте наступний код безпосередньо під відкриваючим тегом StyledForm.
{formStatus.success ? (
<Alert severity="success">Form submitted successfully</Alert>
) : formStatus.error ? (
<Alert severity="error">{formStatus.error}</Alert>
) : null}
Тепер, щоб зафіксувати та перевірити введені користувачем дані, ви можете використовувати функцію register для реєстрації полів введення форми, відстеження їх значень і визначення правил перевірки.
Ця функція приймає кілька аргументів, включаючи назву поля введення та об’єкт параметрів перевірки. Цей об’єкт визначає правила перевірки для поля введення, наприклад конкретний шаблон і мінімальну довжину.
Включіть наведений нижче код як проп у компонент імені користувача 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'
},
})}
Тепер додайте наступний об’єкт як проп у компоненті StyledTextField пароля.
{...register('password', {
required: 'Password required',
minLength: {
value: 8,
message: 'Password must be at least 8 characters'
},
})}
Додайте наступний код під полем введення імені користувача, щоб надати візуальний відгук про вимоги до введення.
Цей код ініціює сповіщення з повідомленням про помилку, щоб повідомити користувача про вимоги, щоб переконатися, що він виправляє будь-які помилки перед надсиланням форми.
{errors.username && <Alert severity="error">{errors.username.message}</Alert>}
Нарешті, додайте подібний код прямо під текстовим полем для введення пароля:
{errors.password && <Alert severity="error">{errors.password.message}</Alert>}
Чудово! З цими змінами у вас повинна бути візуально приваблива функціональна форма, створена за допомогою React Hook Form і Material UI.
Покращуйте свою розробку Next.js за допомогою бібліотек на стороні клієнта
Material UI і React Hook Form — лише два приклади багатьох чудових клієнтських бібліотек, які можна використовувати для прискорення розробки інтерфейсу Next.js.
Клієнтські бібліотеки надають різноманітні готові до виробництва функції та готові компоненти, які можуть допомогти вам швидше та ефективніше створювати кращі зовнішні програми.