Material UI (MUI) je oblíbená knihovna komponent, která implementuje systém Material Design společnosti Google. Poskytuje širokou škálu předpřipravených komponent uživatelského rozhraní, které můžete použít k vytvoření funkčních a vizuálně atraktivních rozhraní.
I když je navržen pro React, můžete jeho schopnosti rozšířit na další frameworky v rámci ekosystému Reactu, jako je Next.js.
Table of Contents
Začínáme s uživatelským rozhraním React Hook Form a Material
Reagovat Hook Form je oblíbená knihovna, která poskytuje jednoduchý a deklarativní způsob vytváření, správy a ověřování formulářů.
Integrací Materiálové uživatelské rozhraní Komponenty uživatelského rozhraní a styly, můžete vytvářet dobře vypadající formuláře, které se snadno používají, a aplikovat konzistentní design na vaši aplikaci Next.js.
Chcete-li začít, lokálně složte projekt Next.js. Pro účely této příručky nainstalujte nejnovější verzi Next.js, která využívá adresář App.
npx create-next-app@latest next-project --app
Dále nainstalujte do svého projektu tyto balíčky:
npm install react-hook-form @mui/material @mui/system @emotion/react @emotion/styled
Zde je náhled toho, co budete stavět:
Zde najdete kód tohoto projektu GitHub úložiště.
Vytváření a styling formulářů
React Hook Form poskytuje řadu užitečných funkcí, včetně háčku useForm.
Tento hák zjednodušuje proces zpracování stavu formuláře, ověřování vstupu a odesílání a zjednodušuje základní aspekty správy formulářů.
Chcete-li vytvořit formulář, který využívá tento háček, přidejte následující kód do nového souboru src/components/form.js.
Nejprve přidejte požadované importy pro balíčky React Hook Form a 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 poskytuje sbírku komponent uživatelského rozhraní připravených k použití, které můžete dále upravovat předáním stylingových rekvizit.
Pokud však chcete větší flexibilitu a kontrolu nad návrhem uživatelského rozhraní, můžete se rozhodnout použít metodu stylu ke stylování prvků uživatelského rozhraní pomocí vlastností CSS. V tomto případě můžete stylovat hlavní součásti formuláře: hlavní kontejner, samotný formulář a vstupní textová pole.
Přímo pod importy přidejte tento kód:
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%',
});
Při vývoji je důležité udržovat modulární kódovou základnu. Z tohoto důvodu byste měli namísto hromadění veškerého kódu do jednoho souboru definovat a stylovat vlastní komponenty v samostatných souborech.
Tímto způsobem můžete snadno importovat a používat tyto komponenty v různých částech vaší aplikace, díky čemuž bude váš kód lépe organizovaný a udržovatelný.
Nyní definujte funkční součást:
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>
</>
);
}
Nakonec importujte tuto komponentu do souboru app/page.js. Odstraňte veškerý standardní kód Next.js a aktualizujte jej následujícím způsobem:
import Form from 'src/components/Form'export default function Home() {
return (
<main >
<Form />
</main>
)
}
Spusťte vývojový server a v prohlížeči byste měli vidět základní formulář se dvěma vstupními poli a tlačítkem pro odeslání.
Manipulace s ověřením formuláře
Forma vypadá skvěle, ale zatím nic nedělá. Aby to fungovalo, musíte přidat nějaký ověřovací kód. Funkce nástroje useForm hook se vám budou hodit při správě a ověřování uživatelských vstupů.
Nejprve definujte následující stavovou proměnnou pro správu aktuálního stavu formuláře v závislosti na tom, zda uživatel zadal správné přihlašovací údaje. Přidejte tento kód do funkční komponenty:
const [formStatus, setFormStatus] = useState({ success: false, error: '' });
Dále vytvořte funkci obslužné rutiny pro ověření přihlašovacích údajů. Tato funkce bude simulovat požadavek HTTP API, ke kterému obvykle dochází, když klientské aplikace komunikují s backendovým autentizačním API.
const onSubmit = (data) => {
if (data.username === 'testuser' && data.password === 'password123') {
setFormStatus({ success: true, error: '' });
} else {
setFormStatus({ success: false, error: 'Invalid username or password' });
}
};
Přidejte do komponenty tlačítka funkci obsluhy události onClick – předejte ji jako rekvizitu – pro spuštění funkce onSubmit, když uživatel klepne na tlačítko Odeslat.
onClick={handleSubmit(onSubmit)}
Hodnota stavové proměnné formStatus je důležitá, protože určuje, jak budete uživateli poskytovat zpětnou vazbu. Pokud uživatel zadá správné přihlašovací údaje, může se zobrazit zpráva o úspěchu. Pokud jste v aplikaci Next.js měli jiné stránky, mohli byste je přesměrovat na jinou stránku.
Měli byste také poskytnout vhodnou zpětnou vazbu, pokud jsou přihlašovací údaje nesprávné. Material UI nabízí skvělou zpětnou vazbu, kterou můžete použít spolu s technikou podmíněného vykreslování Reactu k informování uživatele na základě hodnoty formStatus.
Chcete-li to provést, přidejte následující kód přímo pod otevírací značku StyledForm.
{formStatus.success ? (
<Alert severity="success">Form submitted successfully</Alert>
) : formStatus.error ? (
<Alert severity="error">{formStatus.error}</Alert>
) : null}
Nyní můžete pro zachycení a ověření uživatelského vstupu použít funkci registru k registraci vstupních polí formuláře, sledování jeho hodnot a specifikaci ověřovacích pravidel.
Tato funkce přebírá několik argumentů, včetně názvu vstupního pole a objektu parametrů ověření. Tento objekt určuje pravidla ověření pro vstupní pole, jako je konkrétní vzor a minimální délka.
Pokračujte a zahrňte následující kód jako rekvizitu do komponenty uživatelského jména 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'
},
})}
Nyní přidejte následující objekt jako rekvizitu do komponenty hesla StyledTextField.
{...register('password', {
required: 'Password required',
minLength: {
value: 8,
message: 'Password must be at least 8 characters'
},
})}
Přidejte následující kód pod vstupní pole uživatelského jména, abyste získali vizuální zpětnou vazbu ohledně požadavků na vstup.
Tento kód spustí výstrahu s chybovou zprávou, která uživatele informuje o požadavcích, aby bylo zajištěno, že před odesláním formuláře opraví případné chyby.
{errors.username && <Alert severity="error">{errors.username.message}</Alert>}
Nakonec vložte podobný kód přímo pod textové pole pro zadání hesla:
{errors.password && <Alert severity="error">{errors.password.message}</Alert>}
Skvělý! S těmito změnami byste měli mít vizuálně přitažlivý, funkční formulář vytvořený pomocí React Hook Form a Material UI.
Vylepšete svůj vývoj Next.js pomocí knihoven na straně klienta
Material UI a React Hook Form jsou jen dva příklady z mnoha skvělých knihoven na straně klienta, které můžete použít k urychlení vývoje frontendu Next.js.
Knihovny na straně klienta poskytují řadu funkcí připravených pro produkci a předpřipravených komponent, které vám mohou pomoci rychleji a efektivněji vytvářet lepší front-endové aplikace.