Les toasts sont des éléments d’interface utilisateur couramment utilisés pour afficher des messages temporaires à l’utilisateur, tels que des notifications, des alertes ou des confirmations. Dans ce tutoriel, nous allons apprendre à créer un composant Toast personnalisé avec React, offrant une flexibilité et une personnalisation maximales.

Prérequis#

Avant de commencer ce tutoriel, assurez-vous d’avoir Node.js et npm (ou yarn) installés sur votre système.

Étape 1 : Initialisation du Projet#

Commencez par créer un nouveau projet React en utilisant Create React App :

npx create-react-app react-toast-tutorial
cd react-toast-tutorial

Étape 2 : Installation des Dépendances#

Installez la bibliothèque react-toastify qui offre des fonctionnalités avancées pour créer des toasts dans React :

npm install react-toastify

Étape 3 : Création du Composant Toast#

Créez un nouveau composant Toast.js dans le répertoire src/components :

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

const Toast = ({ message, type }) => {
  const showToast = () => {
    switch (type) {
      case 'success':
        toast.success(message);
        break;
      case 'error':
        toast.error(message);
        break;
      case 'info':
        toast.info(message);
        break;
      default:
        toast(message);
    }
  };

  return (
    <ToastContainer
      position="bottom-right"
      autoClose={3000}
      hideProgressBar={false}
      newestOnTop={false}
      closeOnClick
      rtl={false}
      pauseOnFocusLoss
      draggable
      pauseOnHover
    />
  );
};

export default Toast;

Étape 4 : Utilisation du Composant Toast#

Utilisez le composant Toast dans votre application où vous souhaitez afficher des messages de toast :

// src/App.js
import React from 'react';
import './App.css';
import Toast from './components/Toast';

function App() {
  return (
    <div className="App">
      <h1>Créer un Toast avec React</h1>
      <button onClick={() => <Toast message="Hello, world!" type="success" />}>Afficher Toast Succès</button>
      <button onClick={() => <Toast message="Une erreur s'est produite." type="error" />}>Afficher Toast Erreur</button>
    </div>
  );
}

export default App;

Étape 5 : Tester l’Application#

Exécutez votre application React :

npm start

Naviguez vers http://localhost:3000 dans votre navigateur pour voir votre application. Cliquez sur les boutons pour afficher des toasts de différents types.

Félicitations ! Vous avez créé avec succès un composant Toast personnalisé avec React.

Ce tutoriel ne couvre que les bases. Vous pouvez explorer davantage les fonctionnalités de react-toastify pour personnaliser les toasts selon vos besoins spécifiques.