Gebruiksvriendelijke formulieren maken met Chakra UI in React
Applicaties stylen met aangepaste CSS is leuk totdat een project complexer wordt. De uitdaging ligt in het stylen en het behouden van een consistent ontwerp in de hele applicatie.
Het gebruik van een bibliotheek voor het stylen van gebruikersinterfaces (UI) zoals Chakra UI kan een efficiëntere aanpak blijken te zijn in vergelijking met het alleen vertrouwen op Cascading Style Sheets (CSS). Deze bibliotheken bieden het voordeel dat ze een snelle manier bieden om het visuele uiterlijk van toepassingen te verbeteren door vooraf bepaalde UI-elementen en nuttige eigenschappen te leveren.
Aan de slag met Chakra UI in React-toepassingen
Om aan de slag te gaan met Chakra UI , ga je aan de slag en maak je een basis React-toepassing met het commando create-react-app. Je kunt ook Vite gebruiken om een React-project te maken.
Installeer vervolgens deze afhankelijkheden:
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
De broncode voor dit project staat in de speciale GitHub repository, die toegankelijk is voor geïnteresseerden die de code willen bekijken of willen bijdragen aan de ontwikkeling ervan.
Chakra’s Theme Provider toevoegen
Na het succesvol installeren van de benodigde afhankelijkheden, is het essentieel om de applicatie te omcirkelen met de ChakraProvider. Deze stap kan worden uitgevoerd door de provider op te nemen in een van de eerder genoemde bestanden zoals index.jsx, main.jsx of App.jsx. De code om dit te doen lijkt op het onderstaande voorbeeld:
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>,
)
Om toegang te krijgen tot de componenten en stylingeigenschappen van Chakra UI binnen het bereik van een volledige applicatie, is het noodzakelijk om de volledige applicatiecode te omringen met de ChakraProvider.
Verschillende thema’s schakelen
Chakra UI biedt een standaard voorgebouwd thema dat ondersteuning biedt voor lichte, donkere en systeemkleurmodi. U kunt echter de UI-thema’s en andere stijleigenschappen van uw toepassing verder aanpassen binnen een thema-object zoals gespecificeerd in Chakra’s documentatie .
Om de afwisseling tussen de schemerige en heldere kleurenschema’s te vergemakkelijken, is het nodig om een ThemeToggler component op te zetten in de map ‘components’ in de map ‘src’. Door de meegeleverde code op te nemen, wordt deze functionaliteit mogelijk.
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>
);
}
Zeker! Om verder te gaan met het importeren van het pictogrammenpakket, voer je het volgende commando uit in je code-editor of IDE:pythonimport icons_packageHiermee kun je de functies van het pakket gebruiken in je project.
npm i @chakra-ui/icons
Het component ThemeToggler is ontworpen om een schakelelement weer te geven waarmee gebruikers eenvoudig kunnen wisselen tussen contrasterende visuele schema’s binnen de applicatie door te kiezen uit beschikbare opties zoals “licht” of “donker”. Deze functie biedt een aanpasbare gebruikerservaring en komt tegemoet aan individuele voorkeuren terwijl de consistentie met het algemene ontwerp van het platform behouden blijft.
Dit specifieke element haalt het huidige kleurenschema op uit de useColorMode haak en gebruikt de toggleColorMode functie om af te wisselen tussen verschillende kleurconfiguraties.
De IconButton component combineert op doeltreffende wijze de visuele aantrekkingskracht en herkenbaarheid van een icoon met de interactieve functionaliteit van een knop, waarbij deze twee elementen naadloos in elkaar overvloeien tot een veelzijdig gebruikersinterface-element dat gemakkelijk kan worden opgenomen in verschillende ontwerpcontexten.
Een aanmeldingsformulier UI maken
Maak een nieuw bestand met de naam “Login.jsx” in de map “components” en plak het volgende codefragment erin:
Voeg eerst deze imports toe.
import React, { useState } from 'react';
import {
Box,
Button,
Card,
CardBody,
Center,
Flex,
FormControl,
FormLabel,
Heading,
HStack,
Input,
Stack,
VStack,
useColorMode,
} from '@chakra-ui/react';
Na het importeren van deze UI-componenten moet er een functionele React-entiteit en een primaire structuur worden gedefinieerd die alle onderdelen bevat die nodig zijn voor de grafische gebruikersinterface van het inloggen.
function Login() {
const { colorMode } = useColorMode();
return (
<Box>
<Flex justify="center" align="center" height="80vh" >
<Center>
<Stack>
</Stack>
</Center>
</Flex>
</Box>
);
}
export default Login;
De Box-component is fundamenteel voor het renderen van een div-element en vormt de basis waarop alle andere Chakra UI-componenten zijn gebouwd. Daarentegen vertegenwoordigt Flex een instantie van het Box component waarvan de display eigenschap is ingesteld op flex, waardoor styling mogelijk is door gebruik te maken van de flex eigenschappen.
Hoewel zowel Center als Stack componenten dienen als lay-out tools, vertonen ze subtiele verschillen in hun functionaliteit. De Center component richt zich op het positioneren van al zijn kinderen op het centrale punt, terwijl de Stack component gebruikersinterface-elementen samenvoegt en inter-element spatiëring integreert.
We zullen nu het header-gedeelte van ons formulier maken met behulp van het Header component, dat deze taak vrij effectief zou moeten vergemakkelijken. Om dit te bereiken kun je het bovenstaande codefragment invoegen binnen de grenzen van het Stack component.
<VStack spacing='6'>
<Heading
fontWeight='500'
fontSize='30px'
letterSpacing='-0.5px'
>
Login
</Heading>
</VStack>
De component VStack rangschikt zijn ondergeschikte elementen verticaal in de lay-out. Maak vervolgens een card-element om het aanmeldingsformulier en de bijbehorende componenten in te sluiten.
<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>
Voel je vrij om je App.js bestand aan te passen door zowel het Login component als de ThemeToggler erin op te nemen, als je dat nog niet hebt gedaan.
import React from 'react'
import Login from './components/login'
import ThemeToggler from './components/ThemeToggler'
export default function App() {
return (
<div>
<ThemeToggler />
<Login />
</div>
)
}
Uitstekend, door de ontwikkelserver te activeren kunnen we alle wijzigingen in de code toepassen.
npm run dev
Bij het laden van een webpagina in een webbrowser is de eerste presentatie meestal die van het standaard lichte thema.
Klik op de knop “Toggle Theme” boven aan je scherm om te wisselen tussen verschillende kleurenthema’s voor een visueel aantrekkelijkere ervaring.
Formulierstatus beheren met behulp van React Hooks
Om het aanmeldformulier functioneel te maken, introduceren we statusbeheer met behulp van React Hooks als onze belangrijkste methode om de applicatietoestand op een efficiënte manier te beheren.
Om de verschillende toestanden binnen de Login functionele component te definiëren, kunnen we verschillende programmeertechnieken gebruiken. Voorwaardelijke verklaringen zoals if-else clausules of switch cases kunnen bijvoorbeeld worden gebruikt om te bepalen welke status actief moet zijn op basis van gebruikersinvoer of andere externe factoren. Daarnaast kunnen bibliotheken voor toestandsbeheer zoals Redux of MobX ook worden gebruikt om deze toestanden op een meer georganiseerde manier te beheren en bij te werken. Uiteindelijk zal de specifieke aanpak afhangen van de vereisten en complexiteit van de applicatie die wordt ontwikkeld.
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);
Integreer vervolgens de onChange event handler functie die wijzigingen in de invoerelementen controleert, hun waarden registreert en de e-mail- en wachtwoordvoorwaarden aanpast als dat nodig is.
Overweeg om de volgende codefragmenten in de bovengenoemde invoervelden op te nemen voor verbeterde functionaliteit en gebruikerservaring.
onChange={(e)=> { setEmail(e.target.value)}}
onChange={(e)=> { setPassword(e.target.value)}}
De herziene implementatie verzamelt nu effectief invoer van gebruikers.
Formuliervalidatie en foutafhandeling implementeren met de ingebouwde functies van Chakra UI
Zeker!Hier is een voorbeeld van hoe je dit in je HTML-code kunt implementeren:html function handleSearch(event) {event.preventDefault(); // voorkom standaardgedrag bij het indienen van formulierenconst apiKey = ‘YOUR_API_KEY’; // vervang door uw API-sleutelconst startDate = new Date(‘2023-01-01’); // stel bereik zoekdatum inconst endDate = new Date(‘2023-04-30’); // stel bereik zoekdatum inconst market = ‘USD’; // stel valuta in voor wisselkoersberekeningen//
<form onSubmit={handleSubmit}>
Stel vervolgens een functionele specificatie op voor de methode handleSubmit . Onmiddellijk onder de afgebakende toestandsconfiguraties het volgende codeblok opnemen.
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('');
}
};
De asynchrone handleSubmit functie wordt geactiveerd bij het indienen van het formulier en zet de laadstatus op waar om een verwerkingsactie te simuleren. Om dit visueel aan te geven aan de gebruiker, kun je de Chakra UI loading spinner weergeven in je applicatie-interface.
Als de formuliergegevens worden verzonden door de handleSubmit-functie, wordt de userLogin-functie aangeroepen, die het e-mailadres en wachtwoord accepteert als invoerparameters voor validatiedoeleinden.
Een API-verzoek voor authenticatie simuleren
Om de legitimiteit van de door een gebruiker ingevoerde invoergegevens te garanderen, kan een nep-API-verzoek worden gemaakt via de implementatie van de functie userLogin(), die de authenticiteit van de aanmeldingsgegevens evalueert volgens de normen die van een back-end server worden verwacht.
Neem onder de functie handleSubmit het volgende codefragment op:
const userLogin = async ({ email, password }) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (email === '[email protected]' && password === 'password') {
resolve();
} else {
reject();
}
}, 1000);
});
};
Deze code beschrijft een asynchrone functie die een eenvoudige validatie van logisch redeneren omvat.
UI-functies voor foutafhandeling van Chakra.
Rekening houdend met uw interactie met het formulier en gebruikmakend van Chakra’s UI-bibliotheek, kunt u visueel informatieve antwoorden geven via de feedbackcomponenten. Om dit proces te starten, begin je met het importeren van die specifieke componenten uit Chakra’s repertoire van bronnen.
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>
)}
Neem tot slot de CircularProgress, een spinnercomponent voor het laden, op in de verzendknop door de volgende aanpassing uit te voeren:
{isLoading
? (<CircularProgress isIndeterminate size="24px" color="teal" />)
: ('Sign In')}
Na succesvolle aanmelding krijgt de gebruiker de volgende interface te zien:
Als er een probleem optreedt tijdens de verificatieprocedure, worden gebruikers begroet met een bericht van deze aard:
Verbeter uw ontwikkelingsproces met Chakra UI
Chakra UI biedt een reeks elegant vervaardigde en personaliseerbare gebruikersinterface-elementen waarmee React-interfaces sneller kunnen worden gebouwd. Ongeacht of uw ontwerpeisen eenvoudig of ingewikkeld zijn, Chakra bevat componenten die bijna elke denkbare UI-functie aankunnen.