Hur man bygger användarvänliga formulär med Chakra UI i React
Att styla applikationer med anpassad CSS är kul tills projektet blir mer komplext. Utmaningen ligger i att styla och bibehålla en konsekvent design genom hela applikationen.
Att använda ett stylingbibliotek för användargränssnitt (UI) som Chakra UI kan visa sig vara ett effektivare tillvägagångssätt jämfört med att enbart förlita sig på Cascading Style Sheets (CSS). Dessa bibliotek har fördelen att de snabbt kan förbättra applikationernas visuella utseende genom att tillhandahålla förutbestämda gränssnittselement och användbara egenskaper.
Komma igång med Chakra UI i React-applikationer
För att komma igång med Chakra UI , gå vidare och skapa en grundläggande React-applikation med kommandot create-react-app. Alternativt kan du använda Vite för att skapa ett React-projekt.
Installera sedan dessa beroenden:
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
Källkoden för detta projekt finns i dess särskilda GitHub-förvar, som kan nås av intresserade parter som vill granska eller bidra till dess utveckling.
Lägg till Chakras temaleverantör
Efter att ha installerat de nödvändiga beroendena är det viktigt att omsluta applikationen med ChakraProvider. Detta steg kan utföras genom att integrera providern i någon av de ovan nämnda filerna, t.ex. index.jsx, main.jsx eller App.jsx. Koden för att göra detta skulle likna exemplet nedan:
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>,
)
För att få tillgång till komponenterna och stylingegenskaperna i Chakra UI inom ramen för en hel applikation är det absolut nödvändigt att omge hela applikationskoden med ChakraProvider.
Växla mellan olika teman
Chakra UI tillhandahåller ett förbyggt standardtema som innehåller stöd för färglägena ljus, mörk och system. Du kan dock anpassa programmets UI-teman och andra stilegenskaper ytterligare i ett temaobjekt enligt specifikationerna i Chakras dokumentation .
För att underlätta växlingen mellan de dova och ljusa färgscheman är det nödvändigt att skapa en ThemeToggler-komponent i mappen ‘components’ som finns i katalogen ‘src’. Inkluderingen av den medföljande koden kommer att möjliggöra denna funktionalitet.
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>
);
}
Visst! För att fortsätta med importen av ikonpaketet, vänligen utför följande kommando i din kodredigerare eller IDE:pythonimport icons_packageDetta gör att du kan använda de funktioner som tillhandahålls av paketet inom ditt projekt.
npm i @chakra-ui/icons
ThemeToggler-komponenten är utformad för att visa ett växlingselement som gör att användare enkelt kan växla mellan kontrasterande visuella scheman i applikationen genom att välja bland tillgängliga alternativ som “ljus” eller “mörk”. Denna funktion ger en anpassningsbar användarupplevelse och tillgodoser individuella preferenser samtidigt som den bibehåller konsistensen med plattformens övergripande design.
Detta specifika element hämtar det aktuella färgschemat från useColorMode hook, och använder toggleColorMode funktionen för att växla mellan olika färgkonfigurationer.
IconButton-komponenten kombinerar på ett effektivt sätt det visuella tilltalet och igenkännbarheten hos en ikon med den interaktiva funktionen hos en knapp, och sammanfogar sömlöst dessa två element för att skapa ett mångsidigt användargränssnittselement som enkelt kan införlivas i olika designkontexter.
Skapa ett inloggningsformulär UI
Skapa en ny fil med namnet “Login.jsx” i mappen “components” och klistra in följande kodavsnitt i den:
Lägg först till dessa importer.
import React, { useState } from 'react';
import {
Box,
Button,
Card,
CardBody,
Center,
Flex,
FormControl,
FormLabel,
Heading,
HStack,
Input,
Stack,
VStack,
useColorMode,
} from '@chakra-ui/react';
Efter importen av dessa UI-komponenter bör man definiera en React-funktionsenhet och en primär behållarstruktur som ska kapsla in alla beståndsdelar som behövs för det grafiska användargränssnittet för inloggning.
function Login() {
const { colorMode } = useColorMode();
return (
<Box>
<Flex justify="center" align="center" height="80vh" >
<Center>
<Stack>
</Stack>
</Center>
</Flex>
</Box>
);
}
export default Login;
Box-komponenten är grundläggande för rendering av ett div-element och utgör den grund på vilken alla andra Chakra UI-komponenter är byggda. Flex representerar däremot en instans av Box-komponenten vars display-egenskap har ställts in på flex, vilket möjliggör styling genom användning av flex-egenskaperna.
Även om både Center- och Stack-komponenterna fungerar som layoutverktyg, uppvisar de subtila skillnader i sina funktioner. Mer specifikt fokuserar Center-komponenten på att positionera alla sina barn vid sin centrala punkt, medan Stack-komponenten aggregerar användargränssnittselement och införlivar avstånd mellan elementen.
Vi ska nu konstruera rubrikdelen av vårt formulär med hjälp av Header-komponenten, som bör underlätta denna uppgift ganska effektivt. För att uppnå detta kan man infoga det ovan nämnda kodavsnittet inom Stack-komponentens gränser.
<VStack spacing='6'>
<Heading
fontWeight='500'
fontSize='30px'
letterSpacing='-0.5px'
>
Login
</Heading>
</VStack>
VStack komponenten arrangerar sina underordnade element vertikalt i layouten. Konstruera därefter ett kortelement för att innesluta inloggningsformuläret och dess tillhörande komponenter.
<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>
Ändra gärna din App.js -fil genom att införliva både Login -komponenten och ThemeToggler , om du inte redan har gjort det.
import React from 'react'
import Login from './components/login'
import ThemeToggler from './components/ThemeToggler'
export default function App() {
return (
<div>
<ThemeToggler />
<Login />
</div>
)
}
Utmärkt, genom att aktivera utvecklingsservern kommer vi att kunna tillämpa alla ändringar som gjorts i kodbasen.
npm run dev
När en webbsida laddas i en webbläsare är den första presentationen vanligtvis standardtemat i ljusläge.
Klicka på knappen “Växla tema” längst upp på skärmen för att växla mellan olika färgteman och få en mer visuellt tilltalande upplevelse.
Hantera formulärstatus med React Hooks
För att kunna göra inloggningsformuläret funktionellt kommer vi att introducera tillståndshantering med React Hooks som vår primära metod för att hantera applikationsstatus på ett effektivt sätt.
För att definiera de olika tillstånden inom Login den funktionella komponenten kan man använda en mängd olika programmeringstekniker. Till exempel kan villkorliga satser som if-else-klausuler eller switch case användas för att bestämma vilket tillstånd som ska vara aktivt baserat på användarens input eller andra externa faktorer. Dessutom kan state management-bibliotek som Redux eller MobX användas för att hantera och uppdatera dessa tillstånd på ett mer organiserat sätt. I slutändan beror det specifika tillvägagångssättet på kraven och komplexiteten i den applikation som utvecklas.
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);
Införliva därefter händelsehanteringsfunktionen onChange som övervakar ändringar som görs i inmatningselementen, registrerar deras värden och justerar e-post- och lösenordsvillkoren efter behov.
Överväg att införliva följande kodavsnitt i de ovan nämnda inmatningsfälten för förbättrad funktionalitet och användarupplevelse.
onChange={(e)=> { setEmail(e.target.value)}}
onChange={(e)=> { setPassword(e.target.value)}}
Den reviderade implementeringen kommer nu att effektivt samla in information från användarna.
Implementering av formulärvalidering och felhantering med Chakra UI:s inbyggda funktioner
Visst!Här är ett exempel på hur du kan implementera detta i din HTML-kod:html function handleSearch(event) {event.preventDefault(); // förhindra standardbeteendet för formulärinlämningconst apiKey = ‘YOUR_API_KEY’; // ersätt med din API-nyckelconst startDate = new Date(‘2023-01-01’); // ange sökdatum rangeconst endDate = new Date(‘2023-04-30’); // ange sökdatum rangeconst market = ‘USD’; // ange valuta för växelkursberäkningar//
<form onSubmit={handleSubmit}>
Därefter ska du upprätta en funktionsspecifikation för metoden handleSubmit . Omedelbart under de tillståndskonfigurationer som har avgränsats, införliva det efterföljande kodblocket.
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('');
}
};
Den asynkrona handleSubmit -funktionen aktiveras när formuläret skickas in, och den sätter laddningsstatus till true för att simulera en bearbetningsåtgärd. För att visuellt indikera detta för användaren kan du visa Chakra UI:s laddningsspinner i ditt applikationsgränssnitt.
När funktionen handleSubmit skickar in formulärdata kommer den dessutom att anropa funktionen userLogin, som accepterar e-postadress och lösenord som inparametrar för valideringssyften.
Simulera en API-förfrågan om autentisering
För att säkerställa att de indata som användaren anger är legitima kan man skapa en API-förfrågan genom att implementera funktionen userLogin(), som utvärderar autentiseringen av inloggningsinformationen i enlighet med de standarder som förväntas av en back-end-server.
Under funktionen handleSubmit infogar du följande kodavsnitt:
const userLogin = async ({ email, password }) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (email === '[email protected]' && password === 'password') {
resolve();
} else {
reject();
}
}, 1000);
});
};
Den här koden beskriver en asynkron funktion som omfattar en enkel validering av logiskt resonemang.
Funktioner i Chakras användargränssnitt för felhantering.
Med tanke på din interaktion med formuläret och Chakras UI-bibliotek kan du erbjuda visuellt informativa svar genom dess feedback-komponenter. För att påbörja denna process, börja med att importera de specifika komponenterna från Chakras repertoar av resurser.
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>
)}
Slutligen integrerar du CircularProgress, en laddningsspinnerkomponent, i skicka-knappen genom att genomföra följande justering:
{isLoading
? (<CircularProgress isIndeterminate size="24px" color="teal" />)
: ('Sign In')}
Efter en lyckad inloggning ska användaren presenteras med följande gränssnitt:
Om ett problem uppstår under autentiseringsförfarandet kommer användaren att mötas av ett meddelande av denna typ:
Förbättra din utvecklingsprocess med Chakra UI
Chakra UI erbjuder en rad elegant utformade och anpassningsbara användargränssnittselement som gör det möjligt att snabbt bygga React-gränssnitt. Oavsett om dina designkrav är grundläggande eller komplicerade, omfattar Chakra komponenter som kan tillgodose nästan alla tänkbara UI-funktioner.