Comment créer des alertes personnalisées dans React à l'aide de React-Toastify

Les messages d'alerte sont souvent utilisés dans les applications Web pour afficher des avertissements, des erreurs, des messages de réussite et d'autres informations précieuses.

Il existe quelques packages et frameworks populaires pour créer des messages d'alerte dans React. React-Toastify est une bibliothèque React qui vous permet d'ajouter des notifications et des messages d'alerte à vos applications.

Installation de React Toastify

Pour installer Toastify dans votre projet React, exécutez cette commande dans le répertoire de votre projet :

npm installer --save réagir-toastify

Configuration de Toastify

Pour utiliser le package Toastify, vous devrez importer le ToastConteneur, griller méthode et le fichier CSS fourni par le package.

Le ToastConteneur à l'intérieur du composant App stocke toutes les notifications toast créées.

importer { ToastContainer, toast } depuis"réagir-toastifier";
importer'react-toastify/dist/ReactToastify.css';
fonctionApplication() {
retour(



 </div>
 );
}

Vous pouvez utiliser le griller méthodes pour créer des notifications toast pour votre projet React :

fonctionApplication() {
constante notifier = () => toast.succès("Bonjour!");
retour(


Notifier</button>

 </div>
 );
}

Cliquer sur le bouton généré par ce code appellera le toast.succès méthode, en lui passant le "Hello There!" chaîne. Cela créera une notification toast qui affichera le message à l'écran, comme ceci :

Notez qu'il existe différents types de méthodes de toast que vous pouvez appeler, telles que toast.info(), toast.error(), toast.succès(), toast.warning(). Chacune de ces méthodes a un style de couleur subtil pour refléter le type de message.

Positionnement de vos notifications Toast

Par défaut, les notifications de toast s'affichent en haut à droite de l'écran de l'application Web. Vous pouvez changer cela en définissant la propriété de position sur le ToastConteneur. Six valeurs de position sont disponibles: en haut à droite, en haut au centre, en haut à gauche, en bas à droite, en bas au centre et en bas à gauche.

Par exemple:

fonctionApplication() {
constante notifier = () => toast.succès("Bonjour!");
retour(


Notifier</button>
"en haut à gauche"/>
 </div>
 );
}

Réglage de l'hélice de position sur le ToastConteneur en haut à gauche garantit que toutes les notifications de toast apparaissent en haut à gauche de l'écran.

Vous pouvez modifier la position par défaut des notifications toast individuelles à l'aide de l'accessoire de position du griller méthodes :

fonctionApplication() {
constante notifier = () => toast.succès("Bonjour!", {position: griller. POSITION.TOP_CENTER} );
retour(


Notifier</button>
"en haut à gauche"/>
 </div>
 );
}

Vous pouvez également positionner les notifications Toast en utilisant la propriété de position CSS, mais l'accessoire de position de Toastify est le moyen standard de le faire.

Gestion de la propriété autoClose de la méthode Toast et de ToastContainer

Vous pouvez modifier l'heure d'affichage des notifications de toast. Vous pouvez contrôler la durée d'ouverture d'une notification toast à l'aide de la AutoClose soutenir. Vous pouvez modifier le délai pour toutes les notifications toast et les notifications toast individuelles. Le AutoClose prop n'accepte que la valeur booléenne false ou une durée en millisecondes.

Pour modifier le délai de toutes les notifications toast, utilisez le AutoClose prop au sein de la ToastConteneur élément.

Par exemple:

fonctionApplication() {
constante notifier = () => toast.succès("Bonjour!");
retour(


Notifier</button>
5000}/>
 </div>
 );
}

Avec les paramètres ci-dessus, toutes les notifications de toast s'afficheront pendant exactement cinq secondes (5 000 millisecondes).

En utilisant le AutoClose propriété de chacun griller méthode, vous pouvez personnaliser le délai pour les notifications de toast individuelles.

Par exemple:

fonctionApplication() {
constante notifierUn = () => toast.info("Se fermera dans 10 secondes", {AutoClose: 10000});
constante notifierDeux = () => toast.info("Se fermera dans 15 secondes", {AutoClose: 15000});
retour (


Avertissez-en un</button>
Avertir deux</button>

 </div>
 );
}

Pour empêcher la notification de toast de se fermer par défaut, vous pouvez définir le AutoClose soutenir à FAUX. Vous pouvez vous assurer que l'utilisateur doit fermer manuellement chaque notification de toast en définissant le AutoClose accessoire de la ToastConteneur à faux.

Par exemple:

fonctionApplication() {
constante notifier = () => toast.info("Bonjour!");
retour (


Notifier</button>
FAUX} />
 </div>
 );
}

Réglage de la AutoClose soutien d'un individu griller méthodes pour FAUX veillera également à ce que ces notifications toast spécifiques ne se ferment pas par défaut.

Rendu des notifications sans chaîne avec Toastify

Vous pouvez restituer des chaînes, réagir des composants et des nombres sous forme de messages de notification lorsque vous travaillez avec des notifications toast. Pour rendre un composant React sous forme de notification toast, vous créez le composant et le restituez à l'aide d'un griller méthode.

Par exemple:

fonctionMessage({toastProps, closeToast}) {
retour (


Bienvenue {toastProps.position}</p>
</button>
 </div>
 )
}
exporterdéfaut Message;

Ce bloc de code crée un composant, Message. Lors du rendu d'un composant sous forme de notification, toast ajoute toastAccessoires et fermerToast accessoires à votre composant. Le fermerToast prop est une fonction que vous pouvez utiliser pour fermer la notification. Le toastAccessoires prop est un objet avec des propriétés qui stockent des détails sur la notification toast, y compris sa position, son type et d'autres caractéristiques.

Importez le composant Message, puis transmettez-le à la fonction toast(), en le rendant sous forme de notification toast :

importer { ToastContainer, toast } depuis"réagir-toastifier";
importer'react-toastify/dist/ReactToastify.css';
importer Message depuis"./composants/Message";
fonctionApplication() {
constante message = () => griller(<Message />);
retour (


Bienvenue</button>

 </div>
 );
}

En cliquant sur le bouton, une notification contenant une question et deux boutons s'affichera sur votre écran.

Notifications de toast de style

Vous n'êtes pas obligé d'utiliser le style par défaut pour vos notifications toast. Vous pouvez les personnaliser pour les adapter à un thème ou à un modèle de conception souhaité adapté à votre application Web.

Pour styliser votre notification de toast, donnez-lui un nom du cours et appliquer les personnalisations dans un fichier CSS.

Par exemple:

fonctionApplication() {
constante notifier = () => toast.succès("Bonjour!", {nom du cours: "toast-message"});
retour (


Notifier</button>
"centre supérieur" />
 </div>
 );
}

Avec le nom du cours jointe à votre notification, vous pouvez styliser la notification toast selon vos préférences dans le fichier CSS :

.toast-message {
Couleur de l'arrière plan: #000000;
couleur: #FFFFFF;
taille de police: 20pixels;
rembourrage: 1rem 0.5rem;
}

Suite au style personnalisé ci-dessus, la notification ressemblera à ceci :

Notifications Toast pour votre application Web

Vous pouvez désormais créer des alertes personnalisées dans React à l'aide du package React-Toastify et de ses méthodes disponibles. En stylisant ces alertes/notifications personnalisées selon vos préférences, vous pouvez améliorer l'expérience utilisateur de votre application Web.

React-Toastify offre une méthode rapide et efficace pour inclure des alertes personnalisées dans votre projet React sans tracas.