Jak tworzyć przyjazne dla użytkownika formularze przy użyciu Chakra UI w React?
Stylizowanie aplikacji za pomocą niestandardowego CSS to świetna zabawa, dopóki projekt nie stanie się bardziej złożony. Wyzwanie polega na stylizacji i utrzymaniu spójnego projektu w całej aplikacji.
Wykorzystanie biblioteki stylizacji interfejsu użytkownika (UI), takiej jak Chakra UI, może okazać się bardziej wydajnym podejściem w porównaniu do polegania wyłącznie na kaskadowych arkuszach stylów (CSS). Biblioteki te mają tę zaletę, że oferują szybkie środki poprawy wizualnego wyglądu aplikacji poprzez dostarczanie z góry określonych elementów interfejsu użytkownika i przydatnych właściwości.
Rozpoczęcie pracy z Chakra UI w aplikacjach React
Aby rozpocząć pracę z Chakra UI , utwórz podstawową aplikację React za pomocą polecenia create-react-app. Alternatywnie, możesz użyć Vite do stworzenia projektu React.
Następnie zainstaluj następujące zależności:
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
Kod źródłowy tego projektu znajduje się w dedykowanym repozytorium GitHub, do którego mogą uzyskać dostęp zainteresowane strony, które chcą przejrzeć lub przyczynić się do jego rozwoju.
Add Chakra’s Theme Provider
Po pomyślnym zainstalowaniu niezbędnych zależności, konieczne jest otoczenie aplikacji za pomocą ChakraProvider. Krok ten można wykonać poprzez włączenie dostawcy w dowolnym z wyżej wymienionych plików, takich jak index.jsx, main.jsx lub App.jsx. Kod do tego celu przypominałby przykład podany poniżej:
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(
<React.StrictMode>
<ChakraProvider>
<App />
</ChakraProvider>
</React.StrictMode>,
)
Aby uzyskać dostęp do komponentów i właściwości stylizacji Chakra UI w zakresie całej aplikacji, konieczne jest otoczenie całego kodu aplikacji za pomocą ChakraProvider.
Przełączanie różnych motywów
Chakra UI zapewnia domyślny wstępnie zbudowany motyw, który obejmuje obsługę jasnych, ciemnych i systemowych trybów kolorów. Można jednak dalej dostosowywać motywy interfejsu użytkownika aplikacji i inne właściwości stylu w obiekcie motywu, jak określono w dokumentacji Chakry .
Aby ułatwić naprzemienne przełączanie między przyciemnionymi i jasnymi schematami kolorów, konieczne jest utworzenie komponentu ThemeToggler w folderze “components” znajdującym się w katalogu “src”. Włączenie dostarczonego kodu umożliwi tę funkcjonalność.
import React from 'react'
import { useColorMode, Box, IconButton} from '@chakra-ui/react';
import { SunIcon, MoonIcon } from '@chakra-ui/icons'
export default function ThemeToggler() {
const { colorMode, toggleColorMode } = useColorMode();
return (
<Box textAlign="center" py={4} >
<IconButton
icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
onClick={toggleColorMode}
variant="ghost"
/>
<h2>Toggle Theme</h2>
</Box>
);
}
Oczywiście! Aby kontynuować importowanie pakietu ikon, należy wykonać następujące polecenie w edytorze kodu lub IDE:pythonimport icons_package Pozwoli to na wykorzystanie funkcji dostarczanych przez pakiet w projekcie.
npm i @chakra-ui/icons
Komponent ThemeToggler został zaprojektowany do wyświetlania elementu przełączającego, umożliwiającego użytkownikom łatwe przechodzenie między kontrastującymi schematami wizualnymi w aplikacji poprzez wybór spośród dostępnych opcji, takich jak “jasny” lub “ciemny”. Funkcja ta oferuje możliwość dostosowania doświadczenia użytkownika i zaspokaja indywidualne preferencje, zachowując jednocześnie spójność z ogólnym projektem platformy.
Ten konkretny element pobiera aktualny schemat kolorów z haka useColorMode i wykorzystuje funkcję toggleColorMode do przełączania między różnymi konfiguracjami kolorów.
Komponent IconButton skutecznie łączy atrakcyjność wizualną i rozpoznawalność ikony z interaktywną funkcjonalnością przycisku, płynnie łącząc te dwa elementy w celu stworzenia wszechstronnego elementu interfejsu użytkownika, który można łatwo włączyć do różnych kontekstów projektowych.
Tworzenie interfejsu użytkownika formularza logowania
Utwórz nowy plik o nazwie “Login.jsx” w folderze “components” i wklej do niego poniższy fragment kodu:
Najpierw dodaj te 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 zaimportowaniu wspomnianych komponentów interfejsu użytkownika należy określić jednostkę funkcjonalną React i podstawową strukturę pojemnika, która będzie zawierać wszystkie składniki niezbędne dla graficznego interfejsu użytkownika logowania.
function Login() {
const { colorMode } = useColorMode();
return (
<Box>
<Flex justify="center" align="center" height="80vh" >
<Center>
<Stack>
</Stack>
</Center>
</Flex>
</Box>
);
}
export default Login;
Komponent Box ma fundamentalne znaczenie dla renderowania elementu div i stanowi podstawę, na której zbudowane są wszystkie inne komponenty interfejsu użytkownika Chakra. Z drugiej strony, Flex reprezentuje instancję komponentu Box, którego właściwość display została ustawiona na flex, co pozwala na stylizację poprzez wykorzystanie właściwości flex.
Podczas gdy zarówno komponenty Center, jak i Stack służą jako narzędzia układu, wykazują one subtelne różnice w swoich funkcjach. W szczególności komponent Center koncentruje się na pozycjonowaniu wszystkich swoich elementów podrzędnych w centralnym punkcie, podczas gdy komponent Stack agreguje elementy interfejsu użytkownika i uwzględnia odstępy między elementami.
Skonstruujemy teraz część nagłówkową naszego formularza przy użyciu komponentu Header, który powinien ułatwić to zadanie całkiem skutecznie. Aby to osiągnąć, można wstawić wyżej wspomniany fragment kodu w obrębie komponentu Stack.
<VStack spacing='6'>
<Heading
fontWeight='500'
fontSize='30px'
letterSpacing='-0.5px'
>
Login
</Heading>
</VStack>
Komponent VStack układa swoje podrzędne elementy pionowo w układzie. Następnie należy skonstruować element card, który będzie zawierał formularz logowania i powiązane z nim komponenty.
<Card bg='#f6f8fa' variant='outline' borderColor='#d8dee4' w='308px'
size="lg" borderRadius={8} boxShadow="lg"
>
<CardBody>
<form>
<Stack spacing='4'>
<FormControl isRequired>
<FormLabel size='sm'
color={colorMode === 'dark' ? 'black' : 'black'}
>Email Address</FormLabel>
<Input
type='text'
bg='white'
borderColor='#d8dee4'
size='sm'
borderRadius='6px'
color={colorMode === 'dark' ? 'black' : 'black'}
value={email}
/>
</FormControl>
<FormControl isRequired>
<HStack justify='space-between'>
<FormLabel size='sm'
color={colorMode === 'dark' ? 'black' : 'black'}
>Password</FormLabel>
<Button
as='a'
href='#'
variant='link'
size='xs'
color='#0969da'
fontWeight='500'
>
Forgot password?
</Button>
</HStack>
<Input
type='password'
bg='white'
borderColor='#d8dee4'
size='sm'
borderRadius='6px'
color={colorMode === 'dark' ? 'black' : 'black'}
value={password}
/>
</FormControl>
<Button
type="submit"
bg='#2da44e'
color='white'
size='sm'
_hover={{ bg: '#2c974b' }}
_active={{ bg: '#298e46' }}
>
Sign in
</Button>
</Stack>
</form>
</CardBody>
</Card>
Zachęcamy do zmodyfikowania pliku App.js poprzez włączenie zarówno komponentu Login , jak i ThemeToggler , jeśli jeszcze tego nie zrobiłeś.
import React from 'react'
import Login from './components/login'
import ThemeToggler from './components/ThemeToggler'
export default function App() {
return (
<div>
<ThemeToggler />
<Login />
</div>
)
}
Doskonale, aktywacja serwera deweloperskiego umożliwi nam zastosowanie wszelkich modyfikacji wprowadzonych do bazy kodu.
npm run dev
Po załadowaniu strony internetowej w przeglądarce internetowej, początkowa prezentacja jest zazwyczaj domyślnym motywem trybu lekkiego.
Kliknij przycisk “Przełącz motyw” znajdujący się w górnej części ekranu, aby przełączać się między różnymi motywami kolorystycznymi w celu uzyskania bardziej atrakcyjnych wrażeń wizualnych.
Zarządzanie stanem formularza za pomocą React Hooks
Aby wyrenderować formularz logowania z funkcjonalnością, wprowadzimy zarządzanie stanem za pomocą React Hooks jako naszą podstawową metodę zarządzania stanem aplikacji w efektywny sposób.
Aby zdefiniować różne stany w komponencie funkcjonalnym Login , można wykorzystać różne techniki programowania. Na przykład instrukcje warunkowe, takie jak klauzule if-else lub przypadki przełączania, mogą być używane do określenia, który stan powinien być aktywny w oparciu o dane wejściowe użytkownika lub inne czynniki zewnętrzne. Dodatkowo, biblioteki zarządzania stanem, takie jak Redux lub MobX, mogą być również wykorzystywane do zarządzania i aktualizowania tych stanów w bardziej zorganizowany sposób. Ostatecznie, konkretne podejście będzie zależeć od wymagań i złożoności tworzonej aplikacji.
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);
Następnie włącz funkcję obsługi zdarzenia onChange , która będzie monitorować zmiany wprowadzone w elementach wejściowych, rejestrować ich wartości i w razie potrzeby dostosowywać warunki dotyczące wiadomości e-mail i hasła.
Rozważ włączenie następujących fragmentów kodu do wyżej wymienionych pól wejściowych w celu zwiększenia funkcjonalności i wygody użytkownika.
onChange={(e)=> { setEmail(e.target.value)}}
onChange={(e)=> { setPassword(e.target.value)}}
Zmieniona implementacja będzie teraz skutecznie zbierać dane wejściowe od użytkowników.
Implementacja walidacji formularzy i obsługi błędów za pomocą wbudowanych funkcji Chakra UI
Jasne!Oto przykład, jak można to zaimplementować w kodzie HTML:html function handleSearch(event) {event.preventDefault(); // zapobiega domyślnemu zachowaniu przesyłania formularzyconst apiKey = ‘YOUR_API_KEY’; // zastąp kluczem APIconst startDate = new Date(‘2023-01-01’); // ustaw datę wyszukiwania rangeconst endDate = new Date(‘2023-04-30’); // ustaw datę wyszukiwania rangeconst market = ‘USD’; // ustaw walutę do obliczeń kursu wymiany//
<form onSubmit={handleSubmit}>
Następnie utwórz specyfikację funkcjonalną dla metody handleSubmit . Bezpośrednio pod konfiguracjami stanów, które zostały określone, włącz kolejny blok kodu.
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('');
}
};
Asynchroniczna funkcja handleSubmit jest aktywowana po przesłaniu formularza i ustawia stan ładowania na true w celu symulacji akcji przetwarzania. Aby wizualnie wskazać to użytkownikowi, możesz wyświetlić spinner ładowania Chakra UI w interfejsie aplikacji.
Ponadto, po przesłaniu danych formularza przez funkcję handleSubmit, wywoła ona funkcję userLogin, która akceptuje adres e-mail i hasło jako parametry wejściowe do celów walidacji.
Symulacja żądania API uwierzytelniania
W celu zapewnienia legalności danych wejściowych wprowadzanych przez użytkownika, można utworzyć pozorowane żądanie API poprzez implementację funkcji userLogin(), która ocenia autentyczność informacji logowania zgodnie ze standardami oczekiwanymi od serwera zaplecza.
Poniżej funkcji handleSubmit należy umieścić następujący fragment kodu:
const userLogin = async ({ email, password }) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (email === '[email protected]' && password === 'password') {
resolve();
} else {
reject();
}
}, 1000);
});
};
Niniejszy kod określa funkcję asynchroniczną, która obejmuje prostą walidację logicznego rozumowania.
Funkcje interfejsu użytkownika obsługi błędów Chakra.
Biorąc pod uwagę interakcję z formularzem i wykorzystując bibliotekę interfejsu użytkownika Chakra, możesz oferować wizualne odpowiedzi za pośrednictwem komponentów informacji zwrotnych. Aby zainicjować ten proces, należy rozpocząć od zaimportowania tych konkretnych komponentów z repertuaru zasobów Chakra.
Alert, AlertIcon, AlertTitle, CircularProgress
{error && !isLoggedIn &&
<Alert status='error' variant='solid'>
<AlertIcon />
<AlertTitle>{error}</AlertTitle>
</Alert>
}
{isLoggedIn && (
<Alert status="success" variant='solid'>
<AlertIcon />
<AlertTitle>{success}</AlertTitle>
</Alert>
)}
Na koniec włącz CircularProgress, komponent spinnera ładowania, do przycisku przesyłania, wprowadzając następującą zmianę:
{isLoading
? (<CircularProgress isIndeterminate size="24px" color="teal" />)
: ('Sign In')}
Po pomyślnym zalogowaniu, użytkownikowi zostanie zaprezentowany następujący interfejs:
Jeśli wystąpi problem podczas procedury uwierzytelniania, użytkownicy zostaną powitani komunikatem o następującym charakterze:
Usprawnij proces rozwoju dzięki Chakra UI
Chakra UI oferuje szereg elegancko wykonanych i spersonalizowanych elementów interfejsu użytkownika, które ułatwiają szybką budowę interfejsów React. Niezależnie od tego, czy wymagania projektowe są podstawowe, czy skomplikowane, Chakra obejmuje komponenty zdolne do obsługi niemal każdej możliwej funkcji interfejsu użytkownika.