Jak vytvářet uživatelsky přívětivé formuláře pomocí uživatelského rozhraní Chakra v Reactu

Stylování aplikací pomocí vlastních CSS je zábava, dokud projekt nenaroste na složitosti. Výzva spočívá ve stylu a zachování konzistentního designu v celé aplikaci.

I když stále můžete používat CSS, často je efektivnější používat knihovnu pro stylování uživatelského rozhraní, jako je Chakra UI. Tato knihovna poskytuje rychlý a bezproblémový způsob úpravy vašich aplikací pomocí předdefinovaných komponent uživatelského rozhraní a pomocných prvků.

Začínáme s uživatelským rozhraním Chakra v aplikacích React

Pro začátek Uživatelské rozhraní čakry, pokračuj a, lešení základní aplikace React pomocí aplikace create-react-app příkaz. Případně můžete použijte Vite k vytvoření projektu React.

Dále nainstalujte tyto závislosti:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

Kód tohoto projektu najdete v něm GitHub úložiště.

Přidejte poskytovatele motivů čakry

Po instalaci těchto závislostí musíte aplikaci zabalit do souboru

ChakraProvider. Poskytovatele můžete přidat buď ve svém index.jsx, main.jsxnebo App.jsx jak následuje:

import React from'react'
import ReactDOM from'react-dom/client'
import App from'./App.jsx'
import { ChakraProvider } from'@chakra-ui/react'
ReactDOM.createRoot(document.getElementById('root')).render(



 </ChakraProvider>
 </React.StrictMode>,
)

Zabalení aplikace s ChakraProvider je nezbytný pro přístup ke komponentám uživatelského rozhraní Chakra a vlastnostem stylu v celé vaší aplikaci.

Přepínat různá témata

Chakra UI poskytuje výchozí předpřipravené téma, které zahrnuje podporu pro světlé, tmavé a systémové barevné režimy. Motivy uživatelského rozhraní vaší aplikace a další vlastnosti stylu v rámci objektu motivu však můžete dále přizpůsobit, jak je uvedeno v Dokumentace čakry.

Chcete-li přepínat mezi tmavými a světlými motivy, vytvořte a komponenty/ThemeToggler.jsx soubor v src adresář a zahrňte následující kód.

import React from'react'
import { useColorMode, Box, IconButton} from'@chakra-ui/react';
import { SunIcon, MoonIcon } from'@chakra-ui/icons'
exportdefaultfunctionThemeToggler() {
const { colorMode, toggleColorMode } = useColorMode();
return (
"center" py={4} >
 icon={colorMode 'light'? <MoonIcon />: <SunIcon />}
 onClick={toggleColorMode}
 variant="ghost"
 />
Toggle Theme</h2>
 </Box>
 );
}

Nyní pokračujte a importujte balíček ikon:

npm i @chakra-ui/icons

The ThemeToggler komponenta vykreslí tlačítko, které uživatelům umožní přepínat mezi světlými a tmavými motivy v aplikaci.

Tato komponenta přistupuje k aktuálnímu barevnému režimu použijteColorMode hák a používá toggleColorMode funkce pro přepínání mezi režimy.

The IconButton komponenta přebírá vlastnosti ikony a má také klikací schopnosti tlačítka.

Vytvořte uživatelské rozhraní přihlašovacího formuláře

Vytvoř nový Login.jsx soubor v komponenty adresář a přidejte do něj následující kód:

Nejprve přidejte tyto importy.

import React, { useState } from'react';
import { 
 Box,
 Button,
 Card,
 CardBody,
 Center,
 Flex,
 FormControl,
 FormLabel,
 Heading,
 HStack,
 Input,
 Stack,
 VStack,
 useColorMode,
} from'@chakra-ui/react';

Po importu těchto komponent uživatelského rozhraní definujte funkční komponentu React a komponenty hlavního kontejneru, které budou obsahovat všechny prvky uživatelského rozhraní pro přihlášení.

functionLogin() {
const { colorMode } = useColorMode();
return (

"center" align="center" height="80vh" >



 </Stack>
 </Center>
 </Flex>
 </Box>
 );
}
exportdefault Login;

The Box komponenta vykresluje a div prvek — slouží jako základní stavební blok, na kterém stavíte všechny ostatní součásti uživatelského rozhraní Chakra. Flex, na druhé straně je komponenta Box s vlastností zobrazení nastavenou na flex. To znamená, že ke stylování komponenty můžete použít vlastnosti flex.

Komponenty Center i Stack jsou komponenty rozvržení, mají však drobné rozdíly ve funkčnosti. Středová komponenta je zodpovědná za zarovnání všech podřízených komponent na svůj střed, zatímco Stack seskupuje prvky uživatelského rozhraní dohromady a přidává mezi ně mezery.

Nyní vytvoříme sekci záhlaví formuláře. Komponenta Header bude pro tuto část opravdu užitečná. Do komponenty Stack přidejte tento kód.

'6'>
 fontWeight='500'
 fontSize='30px'
 letterSpacing='-0.5px'
 >
 Login
 </Heading> 
</VStack>

The VStack komponenta skládá své podřízené prvky ve vertikálním směru. Dále vytvořte komponentu karty, která bude obsahovat přihlašovací formulář a jeho prvky.

'#f6f8fa' variant='outline' borderColor='#d8dee4' w='308px'
 size="lg" borderRadius={8} boxShadow="lg"
>



'4'>

'sm'
 color={colorMode 'dark'? 'black': 'black'}
 >Email Address</FormLabel>
 type='text'
 bg='white'
 borderColor='#d8dee4'
 size='sm'
 borderRadius='6px'
 color={colorMode 'dark'? 'black': 'black'}
 value={email}
 />
 </FormControl>

'space-between'>
'sm'
 color={colorMode 'dark'? 'black': 'black'}
 >Password</FormLabel>
as='a'
 href='#'
 variant='link'
 size='xs'
 color='#0969da'
 fontWeight='500'
 >
 Forgot password?
 </Button>
 </HStack>
 type='password'
 bg='white'
 borderColor='#d8dee4'
 size='sm'
 borderRadius='6px'
 color={colorMode 'dark'? 'black': 'black'}
 value={password}
 />
 </FormControl>
 type="submit"
 bg='#2da44e'
 color='white'
 size='sm'
 _hover={{ bg: '#2c974b' }}
 _active={{ bg: '#298e46' }}
 >
 Sign in
 </Button>
 </Stack>
 </form>
 </CardBody>
 </Card>

Pokračujte a aktualizujte svůj App.jsx importovat přihlašovací jméno a také komponentu ThemeToggler.

import React from'react'
import Login from'./components/login'
import ThemeToggler from'./components/ThemeToggler'
exportdefaultfunctionApp() {
return (




 </div>
 )
}

Skvělý! Spusťte vývojový server a aktualizujte změny.

npm run dev

Nyní, jakmile se stránka načte v prohlížeči, zpočátku zobrazí výchozí motiv světlého režimu.

Nyní klikněte na Přepnout motiv tlačítko ikony pro přepnutí režimu motivu.

Správa stavu formuláře pomocí háčků React

V tomto okamžiku přihlašovací formulář obsahuje pouze dvě vstupní pole a tlačítko pro přihlášení. Aby to bylo funkční, začněme implementací logiky řízení stavu pomocí háčků React.

Definujte následující stavy uvnitř funkční komponenty Login.

const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [success, setSuccess] = useState('');
const [error, setError] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [isLoggedIn, setIsLoggedIn] = useState(false);

Dále přidejte při změně handler funkce, která bude naslouchat změnám ve vstupních polích, zachytí vstupy a podle toho aktualizuje stav e-mailu a hesla.

Přidejte tyto kódové příkazy do vstupních polí.

onChange={(e)=> { setEmail(e.target.value)}}
onChange={(e)=> { setPassword(e.target.value)}}

Díky těmto změnám nyní zachytíte uživatelské vstupy.

Implementace ověřování formulářů a zpracování chyb pomocí vestavěných funkcí uživatelského rozhraní Chakra

Nyní přidejte funkci handleru, která zpracuje vstupy a vrátí příslušné výsledky. Na formulář element otevření tag, přidejte na Odeslat funkce handleru následovně.

Dále definujte handleSubmit funkce. Přímo pod stavy, které jste definovali, vložte následující kód.

const handleSubmit = async event => {
 event.preventDefault();
 setIsLoading(true); 
try {
await userLogin({ email, password });
 setSuccess('Logged in successfully!');
 setIsLoading(false);
 setIsLoggedIn(true);
 } catch (error) {
 setError('Invalid username or password!');
 setIsLoading(false);
 setEmail('');
 setPassword('');
 }
};

Tento asynchronní handleSubmit funkce se spustí, když někdo odešle formulář. Funkce nastaví stav načítání na hodnotu true – simuluje akci zpracování. Můžete vykreslit číselník načítání uživatelského rozhraní Chakra a poskytnout uživateli vizuální vodítko.

Navíc funkce handleSubmit zavolá uživatelské přihlášení funkce, která bere e-mail a heslo jako parametry pro jejich ověření.

Simulujte požadavek na autentizační rozhraní API

Chcete-li ověřit, že vstupy poskytnuté uživatelem jsou platné, můžete simulovat volání API definováním uživatelské přihlášení funkce, která ověří přihlašovací údaje podobně jako backend API.

Přímo pod funkci handleSubmit přidejte tento kód:

const userLogin = async ({ email, password }) => {
returnnewPromise((resolve, reject) => {
 setTimeout(() => {
if (email '[email protected]' && password 'password') {
 resolve();
 } else {
 reject();
 }
 }, 1000);
 });
};

Tento kód definuje asynchronní funkci, která provádí jednoduchou logiku ověření logiky.

Funkce uživatelského rozhraní Chakra pro zpracování chyb.

Můžete poskytnout vhodnou vizuální zpětnou vazbu uživatelům na základě jejich interakcí s formulářem pomocí komponent zpětné vazby čakry. Chcete-li to provést, začněte importem těchto komponent z knihovny uživatelského rozhraní Chakry.

Alert, AlertIcon, AlertTitle, CircularProgress

Nyní přidejte následující kód přímo pod značku otevření prvku formuláře.

{error && !isLoggedIn && 
'error' variant='solid'> 

{error}</AlertTitle>
 </Alert>
}
{isLoggedIn && ( 
"success" variant='solid'>

{success}</AlertTitle>
 </Alert>
)}

Nakonec proveďte tuto aktualizaci tlačítka Odeslat tak, aby zahrnovala načítací číselník, komponentu CircularProgress.

{isLoading
? (<CircularProgressisIndeterminatesize="24px"color="teal" />)
: ('Sign In')}

Zde je to, co uživatel uvidí po úspěšném přihlášení:

Pokud dojde k chybě v procesu přihlášení, měli by vidět odpověď takto:

Zlepšete svůj vývojový proces pomocí uživatelského rozhraní Chakra

Chakra UI poskytuje sadu dobře navržených a přizpůsobitelných komponent uživatelského rozhraní, které můžete použít k rychlému sestavení React UIs. Bez ohledu na to, jak jednoduché nebo složité jsou vaše návrhy, Chakra má komponenty pro téměř všechna uživatelská rozhraní úkoly.