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

Kann ich benutzerdefinierte React-Komponenten in Toast-Benachrichtigungen verwenden?

Ja, React-Toastify unterstützt benutzerdefinierte React-Komponenten als Toast-Inhalt.

Wie kann ich Benachrichtigungen dauerhaft anzeigen, bis sie geschlossen werden?

Setzen Sie `autoClose: false` in den Toast-Optionen, um Benachrichtigungen dauerhaft anzuzeigen.

Kann ich bestehende Toasts aktualisieren?

Ja, verwenden Sie `toast.update(toastId, options)` mit der ID des Toasts.

Wie kann ich mehrere Toasts gleichzeitig verwalten?

Verwenden Sie die `limit`-Eigenschaft auf `ToastContainer`, um gleichzeitige Benachrichtigungen zu steuern.

Unterstützt React-Toastify SSR?

Ja, stellen Sie sicher, dass Importe und Rendering clientseitig erfolgen, besonders bei Frameworks wie Next.js.