Sådan opbygger du brugervenlige formularer ved hjælp af Chakra UI i React

Det er sjovt at style applikationer med tilpasset CSS, indtil et projekt vokser i kompleksitet. Udfordringen ligger i styling og opretholdelse af et ensartet design gennem hele applikationen.

Selvom du stadig kan bruge CSS, er det ofte mere effektivt at bruge et UI-stylingbibliotek som Chakra UI. Dette bibliotek giver en hurtig og problemfri måde at style dine apps på ved hjælp af foruddefinerede UI-komponenter og hjælpeprogrammer.

Kom godt i gang med Chakra UI i React-applikationer

Til at komme i gang med Chakra UI, gå videre og, stillads en grundlæggende React-applikation ved hjælp af create-react-appen kommando. Alternativt kan du brug Vite til at oprette et React-projekt.

Installer derefter disse afhængigheder:

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

Du kan finde dette projekts kode i dens GitHub depot.

Tilføj Chakras temaudbyder

Når du har installeret disse afhængigheder, skal du pakke programmet med

ChakraProvider. Du kan tilføje udbyderen enten i din index.jsx, main.jsx, eller App.jsx som følger:

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>,
)

Indpakning af applikationen med ChakraProvider er nødvendigt for at få adgang til Chakra UI's komponenter og stylingegenskaber i hele din applikation.

Skift mellem forskellige temaer

Chakra UI giver et standard præbygget tema, der inkluderer understøttelse af lys, mørk og systemfarvetilstande. Du kan dog yderligere tilpasse din applikations UI-temaer og andre stilegenskaber inden for et temaobjekt som angivet i Chakras dokumentation.

For at skifte mellem de mørke og lyse temaer skal du oprette en komponenter/ThemeToggler.jsx fil i src bibliotek og inkludere følgende kode.

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>
 );
}

Gå nu videre og importer ikonpakken:

npm i @chakra-ui/icons

Det ThemeToggler komponent vil gengive en knap, der lader brugere skifte mellem lyse og mørke temaer i appen.

Denne komponent får adgang til den aktuelle farvetilstand brug ColorMode krog og bruger skifte farvetilstand funktion til at skifte mellem tilstande.

Det Ikonknap komponent påtager sig karakteristika af et ikon, samtidig med at den har de klikbare muligheder som en knap.

Opret en loginformular UI

Opret en ny Login.jsx fil i komponenter bibliotek, og tilføj følgende kode til det:

Først skal du tilføje disse 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 import af disse UI-komponenter skal du definere den funktionelle React-komponent og de vigtigste containerkomponenter, der skal indeholde alle elementerne til login-brugergrænsefladen.

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

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



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

Det Boks komponent gør en div element – ​​det fungerer som den grundlæggende byggeklods, hvorpå du bygger alle andre Chakra UI-komponenter. Flex, på den anden side er en Box-komponent med dens display-egenskab sat til bøje. Det betyder, at du kan bruge flexegenskaberne til at style komponenten.

Både Center- og Stack-komponenter er layoutkomponenter, men de har små forskelle i funktionalitet. Centerkomponenten er ansvarlig for at justere alle underordnede komponenter i midten, mens Stack grupperer UI-elementer sammen og tilføjer mellemrum mellem dem.

Lad os nu bygge formularens overskriftssektion. Header-komponenten vil være virkelig nyttig til denne del. Tilføj denne kode inde i Stack-komponenten.

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

Det VStack komponent stabler sine underordnede elementer i lodret retning. Opret derefter kortkomponenten, der skal indeholde loginformularen og dens elementer.

'#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>

Gå videre og opdater din App.jsx fil for at importere login, såvel som ThemeToggler-komponenten.

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




 </div>
 )
}

Store! Start udviklingsserveren for at opdatere ændringerne.

npm run dev

Nu, når siden indlæses i browseren, vil den oprindeligt vise standard lystilstandstemaet.

Klik nu på Skift tema ikonknap for at skifte tematilstand.

Håndtering af formtilstand ved hjælp af React Hooks

På dette tidspunkt indeholder loginformularen kun to indtastningsfelter og en login-knap. For at gøre det funktionelt, lad os starte med at implementere tilstandsstyringslogik ved hjælp af React kroge.

Definer følgende tilstande inde i den funktionelle login-komponent.

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);

Tilføj derefter på Skift handlerfunktion, der lytter til ændringer i inputfelterne, fanger inputs og opdaterer e-mail- og adgangskodetilstande i overensstemmelse hermed.

Tilføj disse kodesætninger til inputfelterne.

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

Med disse ændringer fanger du nu brugerinput.

Implementering af formularvalidering og fejlhåndtering med Chakra UI's indbyggede funktioner

Tilføj nu en handlerfunktion, der behandler input og returnerer passende resultater. På den form element åbningstag, tilføj ved indsend handlerfunktion som følger.

Dernæst skal du definere handleSend fungere. Lige under de stater, du har defineret, skal du inkludere følgende kode.

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('');
 }
};

Denne asynkrone handleSend funktion udløses, når nogen indsender formularen. Funktionen indstiller indlæsningstilstanden til sand - simulerer en behandlingshandling. Du kan gengive Chakra UI's loading spinner for at give en visuel cue til brugeren.

Desuden vil handleSubmit-funktionen kalde brugerLogin funktion, der tager e-mail og adgangskode ind som parametre for at validere dem.

Simuler en Authentication API Request

For at verificere, at input fra en bruger er gyldige, kan du simulere et API-kald ved at definere brugerLogin funktion, som vil verificere login-legitimationsoplysningerne svarende til, hvordan en backend API ville.

Tilføj denne kode lige under handleSubmit-funktionen:

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

Denne kode definerer en asynkron funktion, der udfører en simpel logikvalideringslogik.

Chakras fejlhåndteringsfunktioner.

Du kan give passende visuel feedback til brugere baseret på deres interaktioner på formularen ved at bruge Chakras feedback-komponenter. For at gøre det, start med at importere disse komponenter fra Chakras UI-bibliotek.

Alert, AlertIcon, AlertTitle, CircularProgress

Tilføj nu følgende kode lige under formularelementets åbningstag.

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

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

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

Foretag endelig denne opdatering af indsend-knappen for at inkludere indlæsningsspinneren, CircularProgress, komponenten.

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

Her er, hvad en bruger vil se, når de logger på med succes:

Hvis der er en fejl i login-processen, bør de se et svar som dette:

Forbedre din udviklingsproces med Chakra UI

Chakra UI giver et sæt veldesignede og tilpasselige UI-komponenter, som du kan bruge til hurtigt at bygge Reager UI'er. Uanset hvor enkle eller komplekse dine designs er, har Chakra komponenter til næsten alle brugergrænseflader opgaver.