Obtenez des alertes cohérentes et attrayantes sur votre site React avec cette bibliothèque.
Les alertes sont des messages affichés sur un site Web/une application Web pour transmettre des informations importantes à un utilisateur. Ils jouent un rôle crucial dans les applications Web. Il existe de nombreuses façons de créer des alertes dans React; Chakra UI rend le processus simple et efficace.
Chakra UI est une bibliothèque de composants populaire pour React qui fournit un ensemble de composants d'interface utilisateur personnalisables et accessibles.
Installation de l'interface utilisateur Chakra
Pour utiliser la bibliothèque Chakra UI, l'une des nombreuses bibliothèques de composants de réaction, vous devez d'abord l'installer. Vous pouvez l'installer en exécutant la commande de terminal suivante dans le répertoire de votre projet node.js :
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
Alternativement, vous pouvez installer Chakra UI en utilisant Yarn. Pour ce faire, exécutez la commande suivante :
fil ajouter @chakra-ui/react @emotion/react @emotion/styled framer-motion
Configuration de l'interface utilisateur Chakra
Après avoir installé Chakra UI, vous devez le rendre disponible dans votre application. Pour ce faire, vous devez configurer le ChakraProvider composant.
Le ChakraProvider Le composant est un composant de niveau supérieur fourni par la bibliothèque Chakra UI. Il enveloppe l'ensemble de l'application et fournit le thème et le contexte de style à tous ses composants.
Pour mettre en place le ChakraProvider composant, importez-le depuis @chakra-ui/réagir:
importer Réagir depuis'réagir'
importer RéagirDOM depuis'réagir-dom/client'
importer Application depuis'./Application'
importer { Fournisseur de chakras } depuis'@chakra-ui/réagir'
ReactDOM.createRoot(document.getElementById('racine') comme HTMLElement).render(
</ChakraProvider>
</React.StrictMode>
)
Le ChakraProvider composant prend en charge un thème soutenir. Passer le thème appui à la ChakraProvider garantit que tous les composants de l'interface utilisateur Chakra de l'application peuvent accéder au thème et au contexte de style fournis. Le thème prop est facultatif; si vous ne le passez pas, Chakra UI utilisera un thème par défaut.
Création d'une alerte personnalisée à l'aide des composants d'alerte
Chakra UI propose quatre composants qui vous permettent de créer une alerte personnalisée: Alerte, AlertIcon, Titre de l'alerte, et AlertDescription.
Pour créer votre message d'alerte, importez ces composants depuis la bibliothèque Chakra UI et utilisez-les comme suit :
importer Réagir depuis'réagir';
importer {Alerte, AlertIcon, AlertDescription, AlertTitle} depuis'@chakra-ui/réagir'fonctionApplication() {
retour ('succès'> Bienvenue !!!</AlertTitle> C'est agréable de vous avoir ici </AlertDescription>
</Alert>
</div>
)
}
exporterdéfaut Application
Après avoir importé les composants, le Alerte composant affiche un message à l'utilisateur. Il a un statut prop défini sur "success", ce qui indique que le message est un message de réussite.
Il existe trois autres statuts: « info », « erreur » et « avertissement ». Le jeu de couleurs et l'icône utilisés par l'alerte dépendent de l'état du message.
Le Alerte composant contient trois enfants: AlertIcon, Titre de l'alerte, et AlertDescription. Le AlertIcon le composant affiche une petite icône à côté du message, Titre de l'alerte affiche le message principal, et AlertDescription affiche une description plus détaillée du message.
Le bloc de code précédent générera une alerte qui ressemble à ceci :
Personnalisation des messages d'alerte à l'aide de la variante Prop
Pour personnaliser l'apparence du message d'alerte, utilisez le une variante accessoire de la Alerte composant. Le une variante prop définit l'apparence visuelle du message d'alerte et détermine le jeu de couleurs, l'icône et le poids de la police du message en fonction de la valeur que vous lui transmettez.
Le une variante prop accepte plusieurs valeurs de chaîne telles que subtil, solide, accent gauche, accent supérieur, accent droit, et accent du bas. Chaque valeur représente un style visuel différent du message d'alerte.
Voici un exemple de quatre composants d'alerte avec différentes variantes :
importer Réagir depuis'réagir';
importer {Alerte, AlertIcon, AlertDescription, AlertTitle, Flex} depuis'@chakra-ui/réagir'fonctionApplication() {
retour ('centre' écart='3' orientation='colonne' mt='4'> 'succès' variante='solide'> Bienvenue !!!</AlertTitle> C'est agréable de vous avoir ici </AlertDescription>
</Alert>
'succès' variante='subtil'> Bienvenue !!!</AlertTitle> C'est agréable de vous avoir ici </AlertDescription>
</Alert>
'succès' variante='accent supérieur'> Bienvenue !!!</AlertTitle> C'est agréable de vous avoir ici </AlertDescription>
</Alert>
'succès' variante='accent gauche'> Bienvenue !!!</AlertTitle> C'est agréable de vous avoir ici </AlertDescription>
</Alert>
</Flex>
</div>
)
}
exporterdéfaut Application
Le rendu du bloc de code ci-dessus affichera une alerte personnalisée comme celle-ci :
Personnalisation de vos messages d'alerte à l'aide de la prop className
Plutôt que de vous en tenir à l'apparence par défaut des messages d'alerte, vous pouvez la personnaliser à l'aide de la nom du cours soutenir. Vous utilisez le nom du cours prop pour définir une classe CSS et appliquer votre style personnalisé au message d'alerte.
Par exemple:
importer Réagir depuis'réagir';
importer {Alerte, AlertIcon, AlertDescription, AlertTitle} depuis'@chakra-ui/réagir'fonctionApplication() {
retour ('succès' NomClasse='alerte'> Bienvenue !!!</AlertTitle> C'est agréable de vous avoir ici </AlertDescription>
</Alert>
</div>
)
}
exporterdéfaut application ;
Dans cet exemple, le composant alert a une classe CSS « alert ». Après avoir défini la classe CSS, vous pouvez définir vos styles dans votre fichier CSS.
Ainsi:
.alerte {
La couleur rouge;
famille de polices: cursive ;
affichage: flexible ;
flex-direction: colonne ;
écart: 0.4rem;
}
Le code ci-dessus appliquera les styles CSS au composant d'alerte. Si vous connaissez les accessoires de style Chakra UI, vous devez les utiliser pour styliser les messages d'alerte au lieu des nom du cours soutenir.
Après avoir appliqué les styles CSS ci-dessus, le composant d'alerte s'affichera comme illustré dans l'image ci-dessous :
Déclenchement de messages d'alerte en réponse à des événements utilisateur
Vous avez créé un composant d'alerte qui affiche systématiquement un message d'alerte à l'écran. Cependant, pour améliorer l'expérience utilisateur, vous pouvez déclencher le message d'alerte en réponse à des événements spécifiques qu'un utilisateur initie, utilisation des écouteurs d'événements JavaScript. Ces événements peuvent inclure le fait de cliquer sur un bouton, de soumettre un formulaire ou de rencontrer une erreur.
Pour déclencher votre message d'alerte en réponse à des événements, utilisez l'état Réagir et le afficher prop des composants de l'interface utilisateur Chakra.
Par exemple:
importer Réagir depuis'réagir';
importer {Alerte, AlertIcon, AlertDescription, AlertTitle, Button, CloseButton} depuis'@chakra-ui/réagir'fonctionApplication() {
constante [affichage, setDisplay] = React.useState('aucun');fonctionnotifier() {
setAffiche('fléchir');
}fonctionfermer() {
setAffiche('aucun');
}retour (
"application">'succès' affichage={affichage} variante='solide'> Bienvenue !!!</AlertTitle> C'est agréable de vous avoir ici </AlertDescription> 'absolu' haut ='6px' droite ='6px' onClick={fermer}/>
</Alert>
exporterdéfaut Application
Ce bloc de code gère l'état de l'affichage des notifications avec le useState accrocher. Il définit l'état initial de l'affichage de la notification sur "aucun", ce qui masque la notification.
Lorsque l'utilisateur clique sur le Bouton, il appelle le notifier fonction. L'appel de la fonction notify modifie la valeur de la afficher état de "aucun" à "flex.", rendant la notification visible.
Lorsque l'utilisateur clique sur le bouton de fermeture, il appelle la fonction close. Il change l'état de l'affichage à "aucun", ce qui masque la notification.
Vous pouvez maintenant créer des alertes personnalisables
Vous avez maintenant appris à créer une alerte personnalisée dans votre application React à l'aide de Chakra UI. Avec Chakra UI, la création d'alertes personnalisées dans React est simple et intuitive, ce qui nous permet de fournir des informations claires et concises à nos utilisateurs. Chakra UI fournit de nombreux autres composants d'interface utilisateur personnalisables et accessibles pour vous aider à créer d'excellentes applications React.
