Chakra vous propose des composants simples avec des styles épurés et utilisables.
Styliser des applications avec du CSS personnalisé est très amusant jusqu'à ce qu'un projet devienne plus complexe. Le défi réside dans le style et le maintien d’une conception cohérente tout au long de l’application.
Bien que vous puissiez toujours utiliser CSS, il est souvent plus efficace d'utiliser une bibliothèque de style d'interface utilisateur comme Chakra UI. Cette bibliothèque offre un moyen rapide et simple de styliser vos applications à l'aide de composants d'interface utilisateur et d'accessoires utilitaires prédéfinis.
Premiers pas avec l'interface utilisateur Chakra dans les applications React
Pour commencer Interface utilisateur des chakras, vas-y et, échafauder une application React de base à l'aide de create-react-app commande. Alternativement, vous pouvez utiliser Vite pour créer un projet React.
Ensuite, installez ces dépendances :
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motionVous pouvez trouver le code de ce projet dans son GitHub dépôt.
Ajouter le fournisseur de thème de Chakra
Après avoir installé ces dépendances, vous devez envelopper l'application avec le Fournisseur de Chakra. Vous pouvez ajouter le fournisseur soit dans votre index.jsx, main.jsx, ou App.jsx comme suit:
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>,
)
Envelopper l'application avec le Fournisseur de Chakra est nécessaire pour accéder aux composants et aux propriétés de style de Chakra UI dans toute votre application.
Basculer entre différents thèmes
Chakra UI fournit un thème prédéfini par défaut qui inclut la prise en charge des modes de couleur clair, sombre et système. Cependant, vous pouvez personnaliser davantage les thèmes d'interface utilisateur de votre application et d'autres propriétés de style au sein d'un objet de thème, comme spécifié dans Documentation de Chakra.
Pour basculer entre les thèmes sombre et clair, créez un composants/ThemeToggler.jsx fichier dans le src répertoire et incluez le code suivant.
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>
);
}
Maintenant, allez-y et importez le package d'icônes :
npm i @chakra-ui/iconsLe ThèmeToggler Le composant affichera un bouton qui permettra aux utilisateurs de basculer entre les thèmes clairs et sombres dans l'application.
Ce composant accède au mode de couleur actuel. utiliserColorMode crochet et utilise le basculerModeCouleur fonction pour basculer entre les modes.
Le IcôneBouton Le composant prend les caractéristiques d’une icône tout en ayant également les capacités cliquables d’un bouton.
Créer une interface utilisateur de formulaire de connexion
Créer un nouveau Connexion.jsx fichier dans le Composants répertoire et ajoutez-y le code suivant :
Tout d’abord, ajoutez ces importations.
import React, { useState } from'react';
import {
Box,
Button,
Card,
CardBody,
Center,
Flex,
FormControl,
FormLabel,
Heading,
HStack,
Input,
Stack,
VStack,
useColorMode,
} from'@chakra-ui/react';
Après avoir importé ces composants d'interface utilisateur, définissez le composant fonctionnel React et les principaux composants du conteneur qui contiendront tous les éléments de l'interface utilisateur de connexion.
functionLogin() {
const { colorMode } = useColorMode();return (
"center" align="center" height="80vh" >
</Stack>
</Center>
</Flex>
</Box>
);
}
exportdefault Login;
Le Boîte composant restitue un div élément: il sert de bloc de construction de base sur lequel vous construisez tous les autres composants de l'interface utilisateur Chakra. Fléchir, en revanche, est un composant Box dont la propriété d'affichage est définie sur fléchir. Cela signifie que vous pouvez utiliser les propriétés flex pour styliser le composant.
Les composants Center et Stack sont tous deux des composants de mise en page, mais ils présentent de légères différences de fonctionnalité. Le composant central est chargé d'aligner tous les composants enfants en son centre, tandis que Stack regroupe les éléments de l'interface utilisateur et ajoute un espace entre eux.
Maintenant, construisons la section d'en-tête du formulaire. Le composant Header sera très utile pour cette partie. Dans le composant Stack, ajoutez ce code.
'6'>
fontSize='30px'
letterSpacing='-0.5px'
>
Login
</Heading>
</VStack> Le VStack Le composant empile ses éléments enfants dans le sens vertical. Créez ensuite le composant de carte qui hébergera le formulaire de connexion et ses éléments.
'#f6f8fa' variant='outline' borderColor='#d8dee4' w='308px'
size="lg" borderRadius={8} boxShadow="lg"
>
type="submit"
bg='#2da44e'
color='white'
size='sm'
_hover={{ bg: '#2c974b' }}
_active={{ bg: '#298e46' }}
>
Sign in
</Button>
</Stack>
</form>
</CardBody>
</Card>
Allez-y et mettez à jour votre App.jsx pour importer le Login, ainsi que le composant ThemeToggler.
import React from'react'
import Login from'./components/login'
import ThemeToggler from'./components/ThemeToggler'
exportdefaultfunctionApp() {
return (
</div>
)
}
Super! Démarrez le serveur de développement pour mettre à jour les modifications.
npm run devDésormais, une fois la page chargée sur le navigateur, elle affichera initialement le thème du mode clair par défaut.
Maintenant, cliquez sur le Basculer le thème bouton icône pour changer le mode thème.
Gestion de l'état du formulaire à l'aide de React Hooks
À ce stade, le formulaire de connexion ne contient que deux champs de saisie et un bouton de connexion. Pour le rendre fonctionnel, commençons par implémenter une logique de gestion d'état en utilisant les crochets React.
Définissez les états suivants dans le composant fonctionnel Connexion.
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);Ensuite, ajoutez le sur le changement fonction de gestionnaire qui écoutera les modifications apportées aux champs de saisie, capturera les entrées et mettra à jour les états de l'e-mail et du mot de passe en conséquence.
Ajoutez ces instructions de code aux champs de saisie.
onChange={(e)=> { setEmail(e.target.value)}}
onChange={(e)=> { setPassword(e.target.value)}}Avec ces modifications, vous capturez désormais les entrées utilisateur.
Implémentation de la validation des formulaires et de la gestion des erreurs avec les fonctionnalités intégrées de Chakra UI
Maintenant, ajoutez une fonction de gestionnaire qui traitera les entrées et renverra les résultats appropriés. Sur le formulaire balise d'ouverture de l'élément, ajoutez la surSoumettre fonction de gestionnaire comme suit.
Ensuite, définissez le handleEnvoyer fonction. Juste en dessous des états que vous avez définis, incluez le code suivant.
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('');
}
};
Cet asynchrone handleEnvoyer la fonction se déclenchera lorsque quelqu'un soumettra le formulaire. La fonction définit l'état de chargement sur vrai, simulant une action de traitement. Vous pouvez afficher la flèche de chargement de Chakra UI pour fournir un repère visuel à l'utilisateur.
De plus, la fonction handleSubmit appellera le Utilisateur en ligne fonction qui prend l'email et le mot de passe comme paramètres pour les valider.
Simuler une demande d'API d'authentification
Pour vérifier que les entrées fournies par un utilisateur sont valides, vous pouvez simuler un appel API en définissant le Utilisateur en ligne fonction qui vérifiera les informations de connexion de la même manière que le ferait une API backend.
Juste en dessous de la fonction handleSubmit, ajoutez ce code :
const userLogin = async ({ email, password }) => {
returnnewPromise((resolve, reject) => {
setTimeout(() => {
if (email '[email protected]' && password 'password') {
resolve();
} else {
reject();
}
}, 1000);
});
};Ce code définit une fonction asynchrone qui exécute une logique de validation logique simple.
Fonctionnalités de l'interface utilisateur de gestion des erreurs de Chakra.
Vous pouvez fournir un retour visuel approprié aux utilisateurs en fonction de leurs interactions sur le formulaire en utilisant les composants de retour de Chakra. Pour ce faire, commencez par importer ces composants depuis la bibliothèque d'interface utilisateur de Chakra.
Alert, AlertIcon, AlertTitle, CircularProgressMaintenant, ajoutez le code suivant juste en dessous de la balise d’ouverture de l’élément de formulaire.
{error && !isLoggedIn &&
'error' variant='solid'>
{error}</AlertTitle>
</Alert>
}
{isLoggedIn && (
"success" variant='solid'>
{success}</AlertTitle>
</Alert>
)} Enfin, effectuez cette mise à jour du bouton de soumission pour inclure le composant spinner de chargement, CircularProgress.
{isLoading
? (<CircularProgressisIndeterminatesize="24px"color="teal" />)
: ('Sign In')}Voici ce qu’un utilisateur verra une fois connecté avec succès :
S'il y a une erreur dans le processus de connexion, ils devraient voir une réponse comme celle-ci :
Améliorez votre processus de développement avec Chakra UI
Chakra UI fournit un ensemble de composants d'interface utilisateur bien conçus et personnalisables que vous pouvez utiliser pour créer rapidement Réagissez aux interfaces utilisateur. Quelle que soit la simplicité ou la complexité de vos conceptions, Chakra propose des composants pour presque toutes les interfaces utilisateur. Tâches.
