Créer des notifications engageantes avec Toastr dans React

Les notifications sont essentielles à toute application Web car elles fournissent aux utilisateurs des informations importantes. Plutôt que de créer le système de notification à partir de zéro, vous pouvez utiliser des bibliothèques externes. Toastr est l'une des bibliothèques populaires pour créer des notifications dans les applications JavaScript.

Installation de la bibliothèque Toastr

Tout d'abord, commencez par créer une application React avec laquelle vous travaillerez. Tu peux créer une application React avec Vite.

Après avoir créé l'application, installez le grille-pain package dans votre projet en exécutant la commande suivante dans votre terminal :

npm install --save toastr

Vous avez maintenant installé le grille-pain package et peut l'utiliser pour afficher des notifications.

Création de notifications à l'aide de Toastr

Pour créer les notifications, vous utiliserez le

grille-pain fonction. Le grille-pain La fonction est utilisée pour créer et afficher des messages toast. Avant de créer vos notifications, assurez-vous d'importer vos grille-pain styles de notifications dans votre fichier CSS.

@import'toastr';

Voici un exemple de création d'une notification à l'aide de grille-pain fonction:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome");
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

Dans cet exemple, vous définissez un notifier fonction. Le Cliquez sur moi le bouton appelle le notifier fonction lorsque vous cliquez dessus. Le notifier la fonction utilise le toastr.succès fonction pour afficher une notification de réussite.

Le toastr.succès fonction prend deux arguments. Le premier argument est le message de notification qui, dans ce cas, est la chaîne "C'est agréable de vous avoir ici". Le deuxième argument est le titre de la notification, "Accueillir".

Une notification semblable à l'image suivante apparaîtra lorsque vous cliquez sur le Cliquez sur moi bouton.

En plus de toastr.succès fonction, la grille-pain L'objet fournit d'autres fonctions pour créer des notifications. Les autres fonctions sont les toastr.erreur, avertissement grille-pain, et toastr.info. Chaque fonction crée une notification avec une couleur d'arrière-plan et une icône différentes, ce qui vous permet de distinguer facilement les différents types de notifications.

Par exemple, lorsque vous utilisez le toastr.erreur fonction, votre notification ressemblera à ceci :

Personnaliser vos notifications

Avec la bibliothèque Toastr, vous ne pouvez pas personnaliser vos notifications en utilisant le CSS traditionnel, contrairement à lorsque vous travaillez avec React-Toastify. Cependant, Toastr fournit toujours d'autres options pour personnaliser les notifications. Vous pouvez utiliser ces options pour personnaliser la position, l'apparence et la fonctionnalité de vos notifications. Vous devez passer les options au troisième argument de la grille-pain méthode.

Voici un exemple:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome", {
 closeButton: true,
 progressBar: true,
 timeOut: 3000,
 positionClass: "toast-top-center",
 showMethod: "fadeIn",
 hideMethod: "fadeOut",
 });
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

Pour personnaliser la notification, ce code utilise le bouton de fermeture, barre de progression, temps libre, positionClass, AfficherMéthode, et hideMethod propriétés de l'objet options. Le bouton de fermeture La propriété détermine si votre notification s'affichera avec un bouton de fermeture. Il accepte une valeur booléenne.

En utilisant le barre de progression propriété, vous pouvez ajouter une barre de progression à la notification. Réglage de la temps libre La propriété vous permet de contrôler la durée d'affichage d'une notification. Cette propriété spécifie le nombre de millisecondes avant que la notification ne disparaisse automatiquement.

Le positionClass La propriété définit la position de la notification sur votre écran. Il accepte huit valeurs prédéfinies. Les valeurs incluent :

• toast-en-haut-droite: affiche la notification dans le coin supérieur droit de votre écran.
• toast-en-haut-gauche: La notification s'affichera dans le coin supérieur gauche de votre écran.
• toast-haut-centre: La notification apparaîtra en haut au centre de votre écran.
• toast-en-bas-droite: Vous verrez la notification dans le coin inférieur droit de votre écran.
• toast-en-bas-gauche: La notification est placée dans le coin inférieur gauche de votre écran.
• toast-bas-centre: Vous trouverez la notification en bas au centre de l'écran.
• toast-top-pleine largeur: La notification apparaît en haut de votre écran, remplissant toute la largeur de l'écran.
• toast-bas-pleine largeur: La notification occupe toute la largeur de votre écran et s'affiche en bas.

Enfin, le AfficherMéthode et hideMethod Les propriétés contrôlent les animations pour afficher et masquer la notification. Le AfficherMéthode La propriété spécifie l'animation utilisée pour afficher une notification, tandis que la propriété hideMethod La propriété spécifie l'animation utilisée pour masquer une notification.

La notification définie dans le bloc de code ci-dessus apparaîtra en haut au centre de votre écran, avec une barre de progression et un bouton de fermeture. Il disparaîtra au bout de trois secondes et utilisera des transitions d'ouverture et de fermeture pour apparaître et disparaître.

Cela ressemblera à quelque chose comme ça.

Notez que vous pouvez personnaliser chaque notification Toastr avec un seul objet d'options au lieu de les personnaliser une par une. Pour ce faire, vous utiliserez le toast.options propriété. Cet objet propriété contient les propriétés de personnalisation de toutes vos notifications Toastr.

Par exemple:

import React from"react";
import toastr from"toastr";
functionApp() {
 toastr.options = {
 closeButton: true,
 progressBar: true,
 positionClass: "toast-top-right",
 timeOut: 5000,
 showMethod: "fadeIn",
 hideMethod: "fadeOut",
 };
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome");
 };
const displayError = () => {
 toastr.error("You ran into an error", "Sorry");
 };
return (



Click Me</button>
Error</button>
 </div>
 );
}
exportdefault App;

Cet exemple montre comment configurer toutes les notifications pour avoir une barre de progression, un bouton de fermeture, un affichage en haut à droite coin de l'écran, se ferme automatiquement après 5 secondes et utilise des transitions de fondu d'entrée et de sortie pour apparaître et disparaître.

Exécuter l'application et cliquer sur les boutons affichera une interface qui ressemblerait à l'image ci-dessous.

Rendez vos notifications interactives

Vous pouvez rendre vos notifications plus attrayantes en ajoutant de l'interactivité, comme la possibilité de cliquer dessus. Pour ce faire, vous utilisez le sur clic propriété. Le sur clic La propriété est l'une des options de personnalisation fournies par la bibliothèque Toastr. Il spécifie une fonction qui s'exécute lorsque vous cliquez sur la notification, similaire à la événement click (l'un des écouteurs d'événement de JavaScript).

Voici un exemple d'utilisation du sur clic propriété:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome", {
 onclick: () => {
 toastr.clear();
 },
 });
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

Dans le bloc de code ci-dessus, l'objet options du toastr.succès fonction contient un sur clic propriété. Le sur clic propriété appelle le grille-pain clair fonction, qui efface la notification de l'écran.

Créer des notifications engageantes à l'aide de Toastr

Ici, vous avez appris à utiliser la bibliothèque Toastr pour créer des notifications attrayantes pour votre application React. Vous avez installé Toastr, l'avez configuré dans votre application, et créé et personnalisé vos notifications. Toastr est une bibliothèque puissante qui peut vous aider à créer des notifications informatives et visuellement attrayantes. Outre Toastr, vous pouvez également essayer d'autres bibliothèques telles que SweetAlert, React-Toastify ou Chakra UI.