So erstellen Sie Toast-Nachrichten in React mit Toastify

Toast-Benachrichtigungen sind schnelle, nicht-aufdringliche Hinweise, die Benutzer informieren, ohne ihren Arbeitsablauf zu unterbrechen. React-Toastify vereinfacht die Implementierung dieser Benachrichtigungen und bietet eine ausgewogene Mischung aus Benutzerfreundlichkeit und Anpassungsmöglichkeiten.

Erste Schritte mit React-Toastify

Installation

Installieren Sie React-Toastify:

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

Grundlegende Einrichtung

Importieren Sie die notwendigen Komponenten und CSS:

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

Platzieren Sie ToastContainer in Ihrer Haupt-App:

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

Arten von Toast-Benachrichtigungen

Verwenden Sie spezifische Toast-Typen für mehr Klarheit:

• Erfolg: toast.success(""Erfolgreich gespeichert!"");
• Fehler: toast.error(""Ein Fehler ist aufgetreten!"");
• Warnung: toast.warning(""Überprüfen Sie Ihre Eingabe!"");
• Info: toast.info(""Update verfügbar!"");
• Standard: toast(""Neutrale Nachricht"");

Anpassen von Toast-Benachrichtigungen

Positionierung

Passen Sie die Toast-Positionen an:

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

Positionen umfassen top-right, top-center, top-left, bottom-right, bottom-center und bottom-left.

Styling

Wenden Sie benutzerdefinierte Stile an:

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

CSS-Beispiel:

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

Bedingtes Styling

Stil basierend auf Typ:

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

Erweiterte Funktionen

Promise-basierte Toasts

Behandeln Sie asynchrone Operationen nahtlos:

const promise = fetch('url').then(res => res.json());
toast.promise(promise, {
  pending: ""Wird geladen..."",
  success: ""Erfolgreich geladen!"",
  error: ""Fehler beim Laden der Daten.""
});

Benutzerdefinierter Inhalt

Fügen Sie React-Komponenten ein:

toast(<div>Benutzerdefinierter HTML-Inhalt <button onClick={() => alert('Geklickt!')}>Klicken</button></div>);

Benachrichtigungszentrum

Verfolgen Sie Benachrichtigungen einfach:

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

const NotificationCenter = () => {
  const { notifications, markAllAsRead } = useNotificationCenter();
  return (
    <div>
      <button onClick={markAllAsRead}>Alle als gelesen markieren</button>
      {notifications.map(n => <div key={n.id}>{n.content}</div>)}
    </div>
  );
};

Best Practices

• Sparsam einsetzen: Vermeiden Sie es, Benutzer zu überfordern.
• Wählen Sie geeignete Typen: Kommunizieren Sie die Absicht der Nachricht klar.
• Dauer sorgfältig festlegen: Wichtige Nachrichten benötigen längere Sichtbarkeit.
• Barrierefreiheit: Stellen Sie lesbaren Inhalt und klaren Kontrast sicher.
• Prägnante Nachrichten: Geben Sie klar an, was benötigt wird.

Vollständiges Implementierungsbeispiel

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(""Alle Felder erforderlich!"");
      return;
    }

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

    toast.promise(saveData, {
      pending: ""Wird gespeichert..."",
      success: ""Profil aktualisiert!"",
      error: ""Ungültige E-Mail!""
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type=""text""
        placeholder=""Benutzername""
        value={data.username}
        onChange={(e) => setData({ ...data, username: e.target.value })}
      />
      <input
        type=""email""
        placeholder=""E-Mail""
        value={data.email}
        onChange={(e) => setData({ ...data, email: e.target.value })}
      />
      <button type=""submit"">Absenden</button>
      <ToastContainer />
    </form>
  );
}

Fazit

React-Toastify hilft dabei, effektive, unaufdringliche Benachrichtigungen in React-Apps zu erstellen. Seine Einfachheit und Flexibilität ermöglichen eine schnelle Integration und erlauben gleichzeitig tiefgreifende Anpassungen, um den Anforderungen Ihrer App gerecht zu werden.

Häufig gestellte Fragen