Erstellen Sie ansprechende Benachrichtigungen mit Toastr in React

Benachrichtigungen sind für jede Webanwendung unerlässlich, da sie Benutzern wichtige Informationen liefern. Anstatt das Benachrichtigungssystem von Grund auf neu zu erstellen, können Sie externe Bibliotheken nutzen. Toastr ist eine der beliebtesten Bibliotheken zum Erstellen von Benachrichtigungen in JavaScript-Anwendungen.

Installieren der Toastr-Bibliothek

Beginnen Sie zunächst mit der Erstellung einer React-Anwendung, mit der Sie arbeiten werden. Du kannst Erstellen Sie eine React-Anwendung mit Vite.

Nachdem Sie die Anwendung erstellt haben, installieren Sie sie Toastr Paket in Ihrem Projekt, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:

npm install --save toastr

Jetzt haben Sie das installiert Toastr Paket und kann es zum Anzeigen von Benachrichtigungen verwenden.

Erstellen von Benachrichtigungen mit Toastr

Um die Benachrichtigungen zu erstellen, verwenden Sie die

Toastr Funktion. Der Toastr Die Funktion dient zum Erstellen und Anzeigen von Toastnachrichten. Stellen Sie vor dem Erstellen Ihrer Benachrichtigungen sicher, dass Sie Ihre importieren Toastr Benachrichtigungsstile in Ihrer CSS-Datei.

@import'toastr';

Hier ist ein Beispiel dafür, wie Sie eine Benachrichtigung mit erstellen Toastr Funktion:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome");
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

In diesem Beispiel definieren Sie a benachrichtigen Funktion. Der Klick mich Die Schaltfläche ruft die auf benachrichtigen Funktion, wenn Sie darauf klicken. Der benachrichtigen Funktion verwendet die toastr.success Funktion zur Anzeige einer Erfolgsmeldung.

Der toastr.success Die Funktion benötigt zwei Argumente. Das erste Argument ist die Benachrichtigungsnachricht, in diesem Fall die Zeichenfolge „Es ist schön, Sie hier zu haben“. Das zweite Argument ist der Titel der Meldung, "Willkommen".

Wenn Sie auf klicken, wird eine Benachrichtigung ähnlich der folgenden Abbildung angezeigt Klick mich Taste.

In Ergänzung zu toastr.success Funktion, die Toastr Das Objekt stellt weitere Funktionen zum Erstellen von Benachrichtigungen bereit. Die anderen Funktionen sind die toastr.error, Toastwarnung, Und toastr.info. Jede Funktion erstellt eine Benachrichtigung mit einer anderen Hintergrundfarbe und einem anderen Symbol, sodass Sie leicht zwischen verschiedenen Benachrichtigungstypen unterscheiden können.

Zum Beispiel, wenn Sie das verwenden toastr.error Funktion, Ihre Benachrichtigung sieht folgendermaßen aus:

Anpassen Ihrer Benachrichtigungen

Mit der Toastr-Bibliothek können Sie Ihre Benachrichtigungen im Gegensatz dazu nicht mit herkömmlichem CSS anpassen bei der Arbeit mit React-Toastify. Toastr bietet jedoch noch weitere Optionen zum Anpassen von Benachrichtigungen. Mit diesen Optionen können Sie die Position, das Aussehen und die Funktionalität Ihrer Benachrichtigungen anpassen. Sie müssen die Optionen an das dritte Argument des übergeben Toastr Methode.

Hier ist ein Beispiel:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome", {
 closeButton: true,
 progressBar: true,
 timeOut: 3000,
 positionClass: "toast-top-center",
 showMethod: "fadeIn",
 hideMethod: "fadeOut",
 });
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

Um die Benachrichtigung anzupassen, verwendet dieser Code die closeButton, Fortschrittsanzeige, Auszeit, positionClass, showMethod, Und hideMethode Eigenschaften des Optionsobjekts. Der closeButton Die Eigenschaft bestimmt, ob Ihre Benachrichtigung mit einer Schaltfläche zum Schließen angezeigt wird. Es akzeptiert einen booleschen Wert.

Verwendung der Fortschrittsanzeige Mit der Eigenschaft können Sie der Benachrichtigung einen Fortschrittsbalken hinzufügen. Einstellen der Auszeit Mit der Eigenschaft können Sie steuern, wie lange eine Benachrichtigung angezeigt wird. Diese Eigenschaft gibt die Anzahl der Millisekunden an, bevor die Benachrichtigung automatisch verschwindet.

Der positionClass Die Eigenschaft definiert die Position der Benachrichtigung auf Ihrem Bildschirm. Es akzeptiert acht vordefinierte Werte. Zu den Werten gehören:

• toast-oben-rechts: Zeigt die Benachrichtigung in der oberen rechten Ecke Ihres Bildschirms an.
• toast-oben-links: Die Benachrichtigung wird in der oberen linken Ecke Ihres Bildschirms angezeigt.
• Toast-oben-Mitte: Die Benachrichtigung wird oben in der Mitte Ihres Bildschirms angezeigt.
• Toast-unten-rechts: Sie sehen die Benachrichtigung in der unteren rechten Ecke Ihres Bildschirms.
• Toast-unten-links: Die Benachrichtigung wird in der unteren linken Ecke Ihres Bildschirms platziert.
• Toast-Boden-Mitte: Sie finden die Benachrichtigung unten in der Mitte des Bildschirms.
• Toast-Oberseite in voller Breite: Die Benachrichtigung erscheint oben auf Ihrem Bildschirm und füllt die gesamte Bildschirmbreite aus.
• Toastboden in voller Breite: Die Benachrichtigung füllt die gesamte Breite Ihres Bildschirms aus und wird unten angezeigt.

Schließlich die showMethod Und hideMethode Eigenschaften steuern die Animationen zum Anzeigen und Ausblenden der Benachrichtigung. Der showMethod Die Eigenschaft gibt die Animation an, die zum Anzeigen einer Benachrichtigung verwendet wird, während die hideMethode Die Eigenschaft gibt die Animation an, die zum Ausblenden einer Benachrichtigung verwendet wird.

Die im obigen Codeblock definierte Benachrichtigung wird oben in der Mitte Ihres Bildschirms mit einem Fortschrittsbalken und einer Schaltfläche zum Schließen angezeigt. Es verschwindet nach drei Sekunden und verwendet Ein- und Ausblendübergänge zum Erscheinen und Verschwinden.

Es wird ungefähr so ​​aussehen.

Beachten Sie, dass Sie jede Toastr-Benachrichtigung mit einem einzelnen Optionsobjekt anpassen können, anstatt sie einzeln anzupassen. Dazu verwenden Sie die toastr.options Eigentum. Dieses Eigenschaftsobjekt enthält die Anpassungseigenschaften aller Ihrer Toastr-Benachrichtigungen.

Zum Beispiel:

import React from"react";
import toastr from"toastr";
functionApp() {
 toastr.options = {
 closeButton: true,
 progressBar: true,
 positionClass: "toast-top-right",
 timeOut: 5000,
 showMethod: "fadeIn",
 hideMethod: "fadeOut",
 };
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome");
 };
const displayError = () => {
 toastr.error("You ran into an error", "Sorry");
 };
return (



Click Me</button>
Error</button>
 </div>
 );
}
exportdefault App;

Dieses Beispiel zeigt, wie Sie alle Benachrichtigungen so konfigurieren, dass sie oben rechts einen Fortschrittsbalken, eine Schaltfläche zum Schließen und eine Anzeige haben Ecke des Bildschirms, schließen Sie sich automatisch nach 5 Sekunden und verwenden Sie Ein- und Ausblendübergänge, um anzuzeigen und verschwinden.

Wenn Sie die Anwendung ausführen und auf die Schaltflächen klicken, wird eine Schnittstelle gerendert, die wie im Bild unten aussieht.

Machen Sie Ihre Benachrichtigungen interaktiv

Sie können Ihre Benachrichtigungen ansprechender gestalten, indem Sie Interaktivität hinzufügen, beispielsweise die Möglichkeit, darauf zu klicken. Dazu nutzen Sie die onclick Eigentum. Der onclick Die Eigenschaft ist eine der Anpassungsoptionen, die die Toastr-Bibliothek bietet. Es gibt eine Funktion an, die ausgeführt wird, wenn Sie auf die Benachrichtigung klicken, ähnlich der Click-Ereignis (einer der Ereignis-Listener von JavaScript).

Hier ist ein Beispiel für die Verwendung von onclick Eigentum:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome", {
 onclick: () => {
 toastr.clear();
 },
 });
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

Im obigen Codeblock ist das Optionsobjekt von toastr.success Funktion enthält eine onclick Eigentum. Der onclick Eigenschaft nennt die Toaster.klar Funktion, die die Benachrichtigung vom Bildschirm löscht.

Erstellen Sie ansprechende Benachrichtigungen mit Toastr

Hier haben Sie erfahren, wie Sie mit der Toastr-Bibliothek ansprechende Benachrichtigungen für Ihre React-Anwendung erstellen. Sie haben Toastr installiert, in Ihrer App eingerichtet und Ihre Benachrichtigungen erstellt und angepasst. Toastr ist eine leistungsstarke Bibliothek, die Ihnen beim Erstellen informativer und optisch ansprechender Benachrichtigungen helfen kann. Neben Toastr können Sie auch andere Bibliotheken wie SweetAlert, React-Toastify oder Chakra UI ausprobieren.