Comment créer des messages Toast en React avec Toastify

Les notifications toast sont des alertes rapides et non intrusives qui maintiennent les utilisateurs informés sans perturber leur flux de travail. React-Toastify simplifie l’implémentation de ces notifications, équilibrant facilité d’utilisation et personnalisation.

Débuter avec React-Toastify

Installation

Installez React-Toastify :

npm install react-toastify
# ou
yarn add react-toastify

Configuration de base

Importez les composants nécessaires et le CSS :

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

Placez ToastContainer dans votre App principal :

function App() {
  return (
    <div>
      <button onClick={() => toast(""Hello, Toastify!"")}>Notify</button>
      <ToastContainer />
    </div>
  );
}

Types de notifications Toast

Utilisez des types de toast spécifiques pour plus de clarté :

• Succès : toast.success(""Enregistré avec succès !"");
• Erreur : toast.error(""Une erreur s'est produite !"");
• Avertissement : toast.warning(""Vérifiez votre saisie !"");
• Info : toast.info(""Mise à jour disponible !"");
• Par défaut : toast(""Message neutre"");

Personnalisation des notifications Toast

Positionnement

Personnalisez les positions des toasts :

toast(""Message"", { position: ""bottom-center"" });

Les positions incluent top-right, top-center, top-left, bottom-right, bottom-center, et bottom-left.

Style

Appliquez des styles personnalisés :

toast(""Toast stylisé"", { className: ""custom-toast"" });

Exemple CSS :

.custom-toast {
  background: navy;
  color: white;
  border-radius: 4px;
}

Style conditionnel

Style basé sur le type :

const notify = (type, message) => {
  toast[type](message, { className: `${type}-toast` });
};

Fonctionnalités avancées

Toasts basés sur des promesses

Gérez les opérations asynchrones de manière fluide :

const promise = fetch('url').then(res => res.json());
toast.promise(promise, {
  pending: ""Chargement..."",
  success: ""Chargé avec succès !"",
  error: ""Échec du chargement des données.""
});

Contenu personnalisé

Incluez des composants React :

toast(<div>Contenu HTML personnalisé <button onClick={() => alert('Cliqué !')}>Cliquer</button></div>);

Centre de notifications

Suivez facilement les notifications :

import { useNotificationCenter } from 'react-toastify/addons/use-notification-center';

const NotificationCenter = () => {
  const { notifications, markAllAsRead } = useNotificationCenter();
  return (
    <div>
      <button onClick={markAllAsRead}>Marquer tout comme lu</button>
      {notifications.map(n => <div key={n.id}>{n.content}</div>)}
    </div>
  );
};

Bonnes pratiques

• Utilisez avec parcimonie : Évitez de submerger les utilisateurs.
• Choisissez les types appropriés : Communiquez clairement l’intention du message.
• Définissez la durée avec soin : Les messages importants nécessitent une visibilité plus longue.
• Accessibilité : Assurez-vous d’un contenu lisible et d’un contraste clair.
• Messages concis : Indiquez clairement ce qui est nécessaire.

Exemple d’implémentation complète

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

function ProfileForm() {
  const [data, setData] = useState({ username: """", email: """" });

  const handleSubmit = (e) => {
    e.preventDefault();

    if (!data.username || !data.email) {
      toast.warning(""Tous les champs sont requis !"");
      return;
    }

    const saveData = new Promise((resolve, reject) => {
      setTimeout(() => {
        data.email.includes(""@"") ? resolve() : reject();
      }, 1500);
    });

    toast.promise(saveData, {
      pending: ""Enregistrement..."",
      success: ""Profil mis à jour !"",
      error: ""Email invalide !""
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type=""text""
        placeholder=""Nom d'utilisateur""
        value={data.username}
        onChange={(e) => setData({ ...data, username: e.target.value })}
      />
      <input
        type=""email""
        placeholder=""Email""
        value={data.email}
        onChange={(e) => setData({ ...data, email: e.target.value })}
      />
      <button type=""submit"">Soumettre</button>
      <ToastContainer />
    </form>
  );
}

Conclusion

React-Toastify aide à créer des notifications efficaces et non intrusives dans les applications React. Sa simplicité et sa flexibilité permettent une intégration rapide tout en offrant une personnalisation approfondie pour répondre aux besoins de votre application.

FAQ