Le guide complet sur React Toastify

React Toastify est une des librairies React les plus utilisées quand il s'agit d'ajouter des notifications sur une application React.

Ces notifications apparaissent généralement de manière temporaire et sont utilisées pour information l'utilisateur d'une action :

• qui a été réussie ;
• qui a échouée ;
• ou d'une information importante.

Avec React Toastify, on parle de notifications non bloquantes (aussi appelées des "toasts"). Contrairement aux notifications bloquantes qui empêche l'utilisateur de faire quelque chose tant qu'il n'a pas fermé la notification, une notification non bloquante est affichée dans un coin afin de ne pas empêcher (de ne pas bloquer) l'utilisateur pendant qu'il est sur notre site internet. 😉

Pourquoi utiliser React Toastify pour les notifications ?

Informer son utilisateur grâce à des notifications non bloquantes est primordial dans une application React. On peut pour cela utiliser des notifications ! Elles permettent d'améliorer l'expérience utilisateur en fournissant un retour immédiat sur les actions effectuées.

D'accord, mais pourquoi React Toastify ? 🤔

L'avantage de React Toastify est que la librairie est facile à intégrer. Elle est très flexible avec la possibilité d'ajouter et de personnaliser des tonnes d'options. Ce n'est pas pour rien que c'est une des librairies les plus tendances depuis ces dernières années pour gérer les notifications sur des projets React !

Installation et configuration de React Toastify

Prérequis pour utiliser React Toastify

Avant d'installer React Toastify, vous devez avoir une application React prête à l'emploi (logique !).

Si ce n'est pas encore fait, vous pouvez créer une nouvelle application en exécutant la commande suivante dans votre terminal qui créera un nouveau projet React grâce à Vite :

npm create vite@latest

Choisissez React et on devrait être bon !

Comment installer React Toastify ?

L'installation de React Toastify est très simple. 😬

Utilisez la commande suivante dans votre projet React :

npm install react-toastify

Et si vous utilisez Yarn (on est pour la paix ✌️) :

yarn add react-toastify

Configuration de base avec ToastContainer

Maintenant que nous avons installé React Toastify, il va falloir le configurer !

Pour ce faire, nous allons devoir importer et configurer ToastContainer qui est un composant responsable de l'affichages des notifications (des toasts).

C'est lui qui permettra d'afficher les notifications dans notre projet React ! Il doit être placé dans votre projet à la racine (ou au niveau supérieur de votre arbre de composants).

Voici un petit exemple d'intégratin dans le fichier App.js :

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
  return (
    <div className="App">
      <h1>Test de React Toastify avec Believemy 🚀</h1>
      <ToastContainer />
    </div>
  );
}

export default App;

Notez bien qu'il faut aussi importer les styles pour ne pas se retrouver avec des notifications qui ne s'affichent pas sur nos projets :

JSX

import 'react-toastify/dist/ReactToastify.css';

Comment afficher une notification avec React Toastify ?

Utilisation de toast()

Pour afficher des notifications avec React Toastify, nous allons utiliser une fonction : toast().

Cette fonction permet de déclencher des notifications à la demande. Elle accepte une chaîne de caractères et même un composant React dans son contenu !

Allez, tentons avec un exemple basique :

toast("Wow ! Attendez ça marche ?");

Avec notre exemple précédent, nous aurions ceci :

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
  return (
    <div className="App">
      <h1>Test de React Toastify avec Believemy 🚀</h1>
      <button onClick={() => toast('Wow ! Attendez ça marche ?')}>
         Afficher une notification
       </button>
      <ToastContainer />
    </div>
  );
}

export default App;

Nous avons ajouté un bouton (button) qui déclenche une notification grâce à la fonction toast() lorsque l'utilisateur clique dessus (onClick).

Et voilà votre première notification ! 💫

Si votre notification ne s'affiche pas c'est peut-être parce que vous tentez d'ajouter ToastContainer dans un composant serveur.

Il est obligatoire d'ajouter celui-ci dans un composant client !

Les types de notifications

React Toastify propose des styles prédéfinis pour différents types de notifications.

toast.success('Succès ! 🎉');
toast.error('Erreur 😱');
toast.info('Information utile 🔍');
toast.warn('Attention ! 💥');

Pensez à ajouter des icônes ou des émojis dans vos notifications ! Ils peuvent améliorer leur lisibilité et attirer l'attention de votre l'utilisateur.

Notification avec du JSX

Il est également possible d'ajouter du JSX dans le message en passant un composant React.

toast(<div><strong>Bonjour</strong> avec du JSX</div>);

Personnaliser les notifications avec React Toastify

React Toastify permet de personnaliser précisément les notifications pour convenir à nos besoins. Voyons comment c'est possible !

Modifier la position d'affichage

Par défaut, les toasts apparaissent en haut à droite de l'écran. Toutefois, vous pouvez facilement modifier leur position en utilisant la propriété position dans ToastContainer.

<ToastContainer position="bottom-left" />

Ici, on indique que nos notifications devront s'afficher en bas à gauche de l'écran de l'utilisateur.

Voici toutes les options disponibles pour la propriété position :

• top-right (par défaut)
• top-center
• top-left
• bottom-right
• bottom-center
• bottom-left

Définir la durée de vie des notifications

Par défaut, les toats disparaissent automatiquement après un certain délai d'environs 5 secondes. Heureusement, nous pouvons le modifier grâce à la propriété autoClose proposée par React Toastify :

toast('Ce message dure 10 secondes', {
  autoClose: 10000, // 10 secondes
});

Ici, notre notification aura une durée de vie de 10 secondes ! Il est aussi possible de modifier ce paramètre pour toutes les notifications en précisant la propriété autoClose directement sur ToastContainer :

<ToastContainer autoClose="10000" /> // millisecondes

Cette petite astuce peut-être utilisée aussi pour la propriété position que nous avons vu.

Toutes nos notifications peuvent apparaître à certain endroit de notre écran en précisant position sur ToastContainer, mais nous pouvons aussi préciser individuellement pour chaque notification l'endroit dans lequel elle doit être affichée en précisant position dans la fonction toast().

Personnaliser le style des notifications

Il est possible de personnaliser le style des notifications avec du CSS.

Par exemple, pour ajouter une classe CSS à un toast :

toast('Notification stylisée par CSS', {
  className: 'ma-classe',
});

Gérer les événements et les callbacks dans React Toastify

React Toastify nous permet aussi de faire des actions quand un événement précis vient d'être réalisé. Voyons quelques exemples ensemble ! 😋

En utilisant des boutons d'actions

Il est possible d'ajouter des boutons ou des actions dans les notifications.

toast(
  <div>
    Fichier chargé. <button onClick={handleClick}>Ouvrir</button>
  </div>
);

En cliquant sur le bouton dans la notification, on déclenche la fonction handleClick. Mais il y a encore mieux, grâce aux callbacks.

En utilisant des callbacks (onClose, onClick)

Nous pouvons ajouter des callbacks pour gérer les événements comme :

• la fermeture d'une notification ;
• le clic sur une notification.

toast('Notification avec des callbacks', {
  onClose: () => console.log('Le toast est fermé'),
  onClick: () => console.log('Le toast est cliqué'),
});

Très utile pour faire des actions personnalisées selon le comportement de l'utilisateur !

Optimiser les notifications avec React Toastify

Définir une limite de notifications affichées en simultané

Il est possible d'afficher plusieurs notifications en même temps. Toastify gère tout ça automatiquement. Mais parfois, on préfère limiter le nombre de notifications visibles sur l'écran !

Il est possible de le faire grâce à la propriété limit.

Dans le code ci-dessous, nous n'afficherons qu'un maximum de 4 notifications en même temps :

<ToastContainer limit={4} />

Afficher une notification persistante

Pour garder une notification visible jusqu'à une interaction de l'utilisateur, il est possible d'utiliser la propriété autoClose={false} :

toast('Ceci est une notification persistante', {
  autoClose: false,
});

Conclusion

React Toastify est une librairie puissante et flexible quand on veut ajouter des notifications dans nos projets React ! Avec son installation rapide et sa configuration avancée, tout est possible rapidement pour avoir des notifications instantanées parfaitement adaptées à nos projets.

Il s'agit tout simplement de l'outil idéal pour améliorer l'interaction avec vos utilisateurs !

Et si vous souhaitez maîtriser davantage les outils comme React et React Toastify, n'hésitez pas à consulter notre formation complète sur React pour aller encore plus loin.