Hvordan bygge brukervennlige skjemaer ved å bruke Chakra UI i React

Styling av applikasjoner med tilpasset CSS er moro helt til et prosjekt vokser i kompleksitet. Utfordringen ligger i styling og opprettholdelse av et konsistent design gjennom hele applikasjonen.

Mens du fortsatt kan bruke CSS, er det ofte mer effektivt å bruke et UI-stylingbibliotek som Chakra UI. Dette biblioteket gir en rask og problemfri måte å style appene dine ved å bruke forhåndsdefinerte brukergrensesnittkomponenter og verktøy.

Komme i gang med Chakra UI i React-applikasjoner

Til å komme i gang med Chakra UI, fortsett og, stillas en grunnleggende React-applikasjon ved hjelp av create-react-appen kommando. Alternativt kan du bruk Vite til å lage et React-prosjekt.

Installer deretter disse avhengighetene:

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

Du kan finne dette prosjektets kode i sin GitHub oppbevaringssted.

Legg til Chakras temaleverandør

Etter at du har installert disse avhengighetene, må du pakke inn applikasjonen med

ChakraProvider. Du kan legge til leverandøren enten i din index.jsx, main.jsx, eller App.jsx følgende:

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

Pakke inn søknaden med ChakraProvider er nødvendig for å få tilgang til Chakra UIs komponenter og stylingegenskaper gjennom hele applikasjonen.

Veksle mellom ulike temaer

Chakra UI gir et standard forhåndsbygd tema som inkluderer støtte for lys, mørk og systemfargemodus. Du kan imidlertid tilpasse applikasjonens UI-temaer og andre stilegenskaper i et temaobjekt som spesifisert i Chakras dokumentasjon.

For å veksle mellom mørke og lyse temaer, lag en komponenter/ThemeToggler.jsx fil i src katalog 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>
 );
}

Nå, fortsett og importer ikonpakken:

npm i @chakra-ui/icons

De ThemeToggler komponent vil gjengi en knapp som lar brukere bytte mellom lyse og mørke temaer i appen.

Denne komponenten får tilgang til gjeldende fargemodus bruk fargemodus krok og bruker veksle mellom fargemodus funksjon for å bytte mellom moduser.

De Ikonknapp komponenten tar på seg egenskapene til et ikon samtidig som den har de klikkbare funksjonene til en knapp.

Opprett et brukergrensesnitt for påloggingsskjema

Lage en ny Login.jsx fil i komponenter katalog, og legg til følgende kode til den:

Først legger du til disse importene.

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

Etter å ha importert disse UI-komponentene, definer React-funksjonskomponenten og hovedbeholderkomponentene som skal inneholde alle elementene for påloggingsbrukergrensesnittet.

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

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



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

De Eske komponent gjengir en div element – ​​det fungerer som den grunnleggende byggesteinen som du bygger alle andre Chakra UI-komponenter på. Flex, på den annen side, er en boks-komponent med visningsegenskapen satt til bøye seg. Dette betyr at du kan bruke flex-egenskapene til å style komponenten.

Både Center- og Stack-komponenter er layoutkomponenter, men de har små forskjeller i funksjonalitet. Senterkomponenten er ansvarlig for å justere alle underordnede komponenter i midten, mens Stack grupperer UI-elementer sammen og legger til avstand mellom dem.

La oss nå bygge overskriftsdelen av skjemaet. Header-komponenten vil være veldig nyttig for denne delen. Inne i Stack-komponenten legger du til denne koden.

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

De VStack komponent stabler sine underordnede elementer i vertikal retning. Deretter oppretter du kortkomponenten som skal inneholde påloggingsskjemaet og dets 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 oppdater din App.jsx fil for å importere påloggingen, så vel som ThemeToggler-komponenten.

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




 </div>
 )
}

Flott! Start utviklingsserveren for å oppdatere endringene.

npm run dev

Nå, når siden laster inn i nettleseren, vil den først vise standard lysmodus-tema.

Nå klikker du på Bytt tema ikonknapp for å bytte temamodus.

Administrere skjematilstand ved å bruke React Hooks

På dette tidspunktet inneholder påloggingsskjemaet kun to inndatafelt og en påloggingsknapp. For å gjøre det funksjonelt, la oss starte med å implementere logikk for statsadministrasjon ved hjelp av React-kroker.

Definer følgende tilstander i funksjonskomponenten pålogging.

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

Deretter legger du til på Endre behandlerfunksjon som vil lytte til endringer i inndatafeltene, fange opp inndataene og oppdatere e-post- og passordstatusene tilsvarende.

Legg til disse kodesetningene i inndatafeltene.

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

Med disse endringene fanger du nå brukerinndata.

Implementering av skjemavalidering og feilhåndtering med Chakra UIs innebygde funksjoner

Legg nå til en behandlerfunksjon som vil behandle inndataene og returnere passende resultater. På form element åpningstag, legg til ved innsending handlerfunksjonen som følger.

Definer deretter handleSend funksjon. Rett under statene du har definert, inkluderer 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 funksjonen utløses når noen sender inn skjemaet. Funksjonen setter innlastingstilstanden til sann – simulerer en behandlingshandling. Du kan gjengi Chakra UIs lastespinner for å gi en visuell pekepinn til brukeren.

Dessuten vil handleSubmit-funksjonen kalle opp Brukerinnlogging funksjon som tar inn e-post og passord som parametere for å validere dem.

Simuler en autentiserings-API-forespørsel

For å verifisere at inngangene gitt av en bruker er gyldige, kan du simulere et API-kall ved å definere Brukerinnlogging funksjon som vil verifisere påloggingsinformasjonen på samme måte som en backend API ville gjort.

Rett under handleSubmit-funksjonen legger du til denne koden:

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

Denne koden definerer en asynkron funksjon som utfører en enkel logikkvalideringslogikk.

Chakras feilhåndteringsfunksjoner.

Du kan gi passende visuell tilbakemelding til brukere basert på deres interaksjoner på skjemaet ved å bruke Chakras tilbakemeldingskomponenter. For å gjøre det, start med å importere disse komponentene fra Chakras brukergrensesnittbibliotek.

Alert, AlertIcon, AlertTitle, CircularProgress

Legg nå til følgende kode rett under skjemaelementets åpningstag.

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

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

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

Til slutt gjør denne oppdateringen til send-knappen for å inkludere lastespinneren, CircularProgress, komponenten.

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

Her er hva en bruker vil se når de logger på vellykket:

Hvis det er en feil i påloggingsprosessen, bør de se et svar som dette:

Forbedre utviklingsprosessen din med Chakra UI

Chakra UI gir et sett med godt utformede og tilpassbare UI-komponenter som du kan bruke til å bygge raskt Reager brukergrensesnitt. Uansett hvor enkle eller komplekse designene dine er, har Chakra komponenter for nesten alle brukergrensesnitt oppgaver.