Hur man bygger användarvänliga formulär med Chakra UI i React

Att styla applikationer med anpassad CSS är kul tills ett projekt växer i komplexitet. Utmaningen ligger i att styla och bibehålla en konsekvent design genom hela applikationen.

Även om du fortfarande kan använda CSS, är det ofta mer effektivt att använda ett UI-stylingbibliotek som Chakra UI. Det här biblioteket ger ett snabbt och problemfritt sätt att styla dina appar med fördefinierade UI-komponenter och verktyg.

Komma igång med Chakra UI i React-applikationer

Att komma igång med Chakra UI, fortsätt och, byggnadsställning en grundläggande React-applikation med hjälp av create-react-appen kommando. Alternativt kan du använd Vite för att skapa ett React-projekt.

Installera sedan dessa beroenden:

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

Du kan hitta detta projekts kod i dess GitHub förvaret.

Lägg till Chakras temaleverantör

När du har installerat dessa beroenden måste du slå in programmet med ChakraProvider

. Du kan lägga till leverantören antingen i din index.jsx, main.jsx, eller App.jsx som följer:

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

Slå in applikationen med ChakraProvider är nödvändigt för att komma åt Chakra UI: s komponenter och stylingegenskaper i hela din applikation.

Växla mellan olika teman

Chakra UI tillhandahåller ett standard förbyggt tema som inkluderar stöd för ljusa, mörka och systemfärglägen. Du kan dock ytterligare anpassa din applikations användargränssnittsteman och andra stilegenskaper inom ett temaobjekt som specificerats i Chakras dokumentation.

För att växla mellan mörka och ljusa teman, skapa en komponenter/ThemeToggler.jsx fil i src katalog och inkludera följande kod.

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

Nu, fortsätt och importera ikonpaketet:

npm i @chakra-ui/icons

De ThemeToggler komponenten återger en knapp som låter användare växla mellan ljusa och mörka teman i appen.

Denna komponent kommer åt det aktuella färgläget använd ColorMode krok och använder växla Färgläge funktion för att växla mellan lägen.

De IconButton komponenten antar egenskaperna hos en ikon samtidigt som den har de klickbara funktionerna för en knapp.

Skapa ett användargränssnitt för inloggningsformulär

Skapa en ny Login.jsx fil i komponenter katalog och lägg till följande kod till 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 att ha importerat dessa UI-komponenter, definiera den funktionella React-komponenten och huvudbehållarkomponenterna som kommer att innehålla alla element för användargränssnittet för inloggning.

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

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



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

De Låda komponent gör en div element – ​​det fungerar som basbyggstenen ovanpå vilken du bygger alla andra Chakra UI-komponenter. Böja, å andra sidan, är en Box-komponent med dess display-egenskap inställd på böja. Det betyder att du kan använda flexegenskaperna för att styla komponenten.

Både Center- och Stackkomponenter är layoutkomponenter, men de har små skillnader i funktionalitet. Centerkomponenten är ansvarig för att justera alla underordnade komponenter i mitten, medan Stack grupperar UI-element och lägger till avstånd mellan dem.

Låt oss nu bygga rubrikdelen av formuläret. Header-komponenten kommer att vara till stor hjälp för den här delen. Lägg till den här koden i Stack-komponenten.

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

De VStack komponent staplar sina underordnade element i vertikal riktning. Skapa sedan kortkomponenten som ska innehålla inloggningsformuläret och dess element.

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

Varsågod och uppdatera din App.jsx fil för att importera inloggningen, såväl som ThemeToggler-komponenten.

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




 </div>
 )
}

Bra! Starta utvecklingsservern för att uppdatera ändringarna.

npm run dev

Nu, när sidan laddas i webbläsaren, kommer den initialt att visa standardtema för ljusläge.

Klicka nu på Växla tema ikonknapp för att byta temaläge.

Hantera formulärtillstånd med hjälp av React Hooks

Vid det här laget innehåller inloggningsformuläret bara två inmatningsfält och en inloggningsknapp. För att göra det funktionellt, låt oss börja med att implementera logik för tillståndshantering med hjälp av React-krokar.

Definiera följande tillstånd inuti den funktionella inloggningskomponenten.

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

Lägg sedan till på Ändra hanterarfunktion som lyssnar på ändringar av inmatningsfälten, fångar indata och uppdaterar tillstånden för e-post och lösenord därefter.

Lägg till dessa kodsatser i inmatningsfälten.

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

Med dessa ändringar fångar du nu användarinmatningar.

Implementera formulärvalidering och felhantering med Chakra UI: s inbyggda funktioner

Lägg nu till en hanterarfunktion som kommer att bearbeta indata och returnera lämpliga resultat. På form elementets öppningstagg, lägg till onSubmit hanterarfunktion enligt följande.

Därefter definierar du handleSubmit fungera. Precis under de tillstånd du har definierat, inkludera följande kod.

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

Detta asynkrona handleSubmit funktionen utlöses när någon skickar formuläret. Funktionen ställer in laddningstillståndet till sant – simulerar en bearbetningsåtgärd. Du kan rendera Chakra UI: s laddningsspinnare för att ge en visuell signal till användaren.

Dessutom kommer handleSubmit-funktionen att anropa användarnamn funktion som tar in e-post och lösenord som parametrar för att validera dem.

Simulera en Authentication API Request

För att verifiera att indata från en användare är giltiga kan du simulera ett API-anrop genom att definiera användarnamn funktion som kommer att verifiera inloggningsuppgifterna som liknar hur ett backend-API skulle göra.

Precis under handleSubmit-funktionen lägger du till den här koden:

const userLogin = async ({ email, password }) => {
returnnewPromise((resolve, reject) => {
 setTimeout(() => {
if (email 'test@email.com' && password 'password') {
 resolve();
 } else {
 reject();
 }
 }, 1000);
 });
};

Denna kod definierar en asynkron funktion som utför en enkel logikvalideringslogik.

Chakras felhanteringsfunktioner i användargränssnittet.

Du kan ge lämplig visuell feedback till användare baserat på deras interaktioner på formuläret genom att använda Chakras feedbackkomponenter. För att göra det, börja med att importera dessa komponenter från Chakras UI-bibliotek.

Alert, AlertIcon, AlertTitle, CircularProgress

Lägg nu till följande kod precis under öppningstaggen för formulärelementet.

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

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

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

Slutligen, gör den här uppdateringen av skicka-knappen för att inkludera laddningssnurran, CircularProgress, komponenten.

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

Här är vad en användare kommer att se när de loggar in:

Om det finns ett fel i inloggningsprocessen bör de se ett svar så här:

Förbättra din utvecklingsprocess med Chakra UI

Chakra UI tillhandahåller en uppsättning väldesignade och anpassningsbara UI-komponenter som du kan använda för att snabbt bygga Reagera användargränssnitt. Oavsett hur enkla eller komplexa dina konstruktioner är, har Chakra komponenter för nästan alla användargränssnitt uppgifter.