So erstellen Sie benutzerdefinierte Benachrichtigungen in React mit React-Toastify

Warnmeldungen werden häufig in Web-Apps verwendet, um Warnungen, Fehler, Erfolgsmeldungen und andere wertvolle Informationen anzuzeigen.

Es gibt einige beliebte Pakete und Frameworks zum Erstellen von Warnmeldungen in React. React-Toastify ist eine React-Bibliothek, mit der Sie Ihren Anwendungen Benachrichtigungen und Warnmeldungen hinzufügen können.

Installieren von React Toastify

Um Toastify in Ihrem React-Projekt zu installieren, führen Sie diesen Befehl in Ihrem Projektverzeichnis aus:

npm install --save reagieren-toastifizieren

Toastify einrichten

Um das Toastify-Paket zu verwenden, müssen Sie die ToastContainer, Toast -Methode und die begleitende CSS-Datei, die vom Paket bereitgestellt wird.

Der ToastContainer In der App-Komponente werden alle erstellten Popup-Benachrichtigungen gespeichert.

importieren { ToastContainer, Toast } aus"reagieren-toastifizieren";
importieren'react-toastify/dist/ReactToastify.css';

instagram viewer
FunktionApp() {
zurückkehren(



 </div>
 );
}

Du kannst den... benutzen Toast Methoden zum Erstellen von Toastbenachrichtigungen für Ihr React-Projekt:

FunktionApp() {
konst benachrichtigen = () => Toast.Erfolg("Hallo!");
zurückkehren(


Benachrichtigen</button>

 </div>
 );
}

Wenn Sie auf die Schaltfläche klicken, die dieser Code generiert, wird die aufgerufen toast.erfolg -Methode und übergebe ihr das "Hello There!" Schnur. Dadurch wird eine Toastbenachrichtigung erstellt, die die Nachricht wie folgt auf dem Bildschirm anzeigt:

Beachten Sie, dass es verschiedene Arten von Toastmethoden gibt, die Sie aufrufen können, wie z toast.info(), toast.error(), toast.erfolg (), Toast.Warnung(). Jede dieser Methoden hat einen subtilen Farbstil, um die Art der Nachricht widerzuspiegeln.

Positionierung Ihrer Toastbenachrichtigungen

Standardmäßig werden Popup-Benachrichtigungen oben rechts auf dem Bildschirm der Web-App angezeigt. Sie können dies ändern, indem Sie die Positionseigenschaft auf festlegen ToastContainer. Es sind sechs Positionswerte verfügbar: Oben rechts, Oben mittig, Oben links, Unten rechts, Unten mittig und Unten links.

Zum Beispiel:

FunktionApp() {
konst benachrichtigen = () => Toast.Erfolg("Hallo!");
zurückkehren(


Benachrichtigen</button>
"oben links"/>
 </div>
 );
}

Einstellen der Positionsstütze auf der ToastContainer nach oben links stellt sicher, dass alle Popup-Benachrichtigungen oben links auf dem Bildschirm angezeigt werden.

Sie können die Standardposition für einzelne Toastbenachrichtigungen ändern, indem Sie die Positionsstütze von verwenden Toast Methoden:

FunktionApp() {
konst benachrichtigen = () => Toast.Erfolg("Hallo!", {Position: Toast. POSITION.TOP_CENTER});
zurückkehren(


Benachrichtigen</button>
"oben links"/>
 </div>
 );
}

Sie können Toast-Benachrichtigungen auch positionieren mit der CSS-Positionseigenschaft, aber die Positionsstütze von Toastify ist die Standardmethode, um dies zu tun.

Umgang mit der autoClose-Prop der Toast-Methode und ToastContainer

Sie können die Anzeigezeit von Toastbenachrichtigungen ändern. Sie können steuern, wie lange eine Popup-Benachrichtigung geöffnet bleibt, indem Sie das verwenden automatisch schließen Stütze. Sie können die Verzögerungszeit für alle Toastbenachrichtigungen und personenspezifischen Toastbenachrichtigungen ändern. Der automatisch schließen prop akzeptiert nur den booleschen Wert false oder eine Dauer in Millisekunden.

Um die Verzögerungszeit für alle Toastbenachrichtigungen zu ändern, verwenden Sie die automatisch schließen Stütze innerhalb der ToastContainer Element.

Zum Beispiel:

FunktionApp() {
konst benachrichtigen = () => Toast.Erfolg("Hallo!");
zurückkehren(


Benachrichtigen</button>
5000}/>
 </div>
 );
}

Mit den obigen Einstellungen werden alle Toastbenachrichtigungen genau fünf Sekunden lang (5.000 Millisekunden) angezeigt.

Verwendung der automatisch schließen Eigentum von jedem Toast -Methode können Sie die Verzögerungszeit für einzelne Toastbenachrichtigungen anpassen.

Zum Beispiel:

FunktionApp() {
konst BenachrichtigungEins = () => toast.info("Wird in 10 Sekunden geschlossen", {automatisch schließen: 10000});
konst benachrichtigenZwei = () => toast.info("Wird in 15 Sekunden geschlossen", {automatisch schließen: 15000});
zurückkehren (


Benachrichtige einen</button>
Zwei benachrichtigen</button>

 </div>
 );
}

Um zu verhindern, dass die Toastbenachrichtigung standardmäßig geschlossen wird, können Sie das einstellen automatisch schließen Stütze zu FALSCH. Sie können sicherstellen, dass der Benutzer jede Toastbenachrichtigung manuell schließen muss, indem Sie die Option festlegen automatisch schließen Stütze der ToastContainer zu falsch.

Zum Beispiel:

FunktionApp() {
konst benachrichtigen = () => toast.info("Hallo!");
zurückkehren (


Benachrichtigen</button>
FALSCH} />
 </div>
 );
}

Einstellung der automatisch schließen Stütze des Individuums Toast Methoden zu FALSCH stellt auch sicher, dass diese spezifischen Toastbenachrichtigungen nicht standardmäßig geschlossen werden.

Rendern von Nicht-String-Benachrichtigungen mit Toastify

Sie können Zeichenfolgen, Reaktionskomponenten und Zahlen als Benachrichtigungsmeldungen rendern, wenn Sie mit Toastbenachrichtigungen arbeiten. Um eine React-Komponente als Popup-Benachrichtigung zu rendern, erstellen Sie die Komponente und rendern sie mit a Toast Methode.

Zum Beispiel:

FunktionNachricht({toastProps, closeToast}) {
zurückkehren (


Willkommen {toastProps.position}</p>
</button>
 </div>
 )
}
ExportStandard Nachricht;

Dieser Codeblock erstellt eine Komponente, Nachricht. Beim Rendern einer Komponente als Benachrichtigung fügt Toast hinzu toastRequisiten Und closeToast Requisiten zu Ihrer Komponente. Der closeToast prop ist eine Funktion, mit der Sie die Benachrichtigung schließen können. Der toastRequisiten prop ist ein Objekt mit Eigenschaften, die Details zur Toastbenachrichtigung speichern, einschließlich ihrer Position, ihres Typs und anderer Eigenschaften.

Importieren Sie die Message-Komponente, übergeben Sie sie dann an die Funktion toast() und rendern Sie sie als Toastbenachrichtigung:

importieren { ToastContainer, Toast } aus"reagieren-toastifizieren";
importieren'react-toastify/dist/ReactToastify.css';
importieren Nachricht aus"./Komponenten/Nachricht";
FunktionApp() {
konst Nachricht = () => Toast(<Nachricht />);
zurückkehren (


Willkommen</button>

 </div>
 );
}

Wenn Sie auf die Schaltfläche klicken, wird eine Benachrichtigung mit einer Frage und zwei Schaltflächen auf Ihrem Bildschirm angezeigt.

Toastbenachrichtigungen gestalten

Sie müssen nicht das Standarddesign für Ihre Toastbenachrichtigungen verwenden. Sie können sie an ein gewünschtes Designthema oder -muster anpassen, das für Ihre Webanwendung geeignet ist.

Um Ihre Toastbenachrichtigung zu gestalten, geben Sie ihr ein Klassenname Und Wenden Sie die Anpassungen in einer CSS-Datei an.

Zum Beispiel:

FunktionApp() {
konst benachrichtigen = () => Toast.Erfolg("Hallo!", {Klassenname: "Toast-Nachricht"});
zurückkehren (


Benachrichtigen</button>
"oben in der Mitte" />
 </div>
 );
}

Mit dem Klassenname an Ihre Benachrichtigung angehängt, können Sie die Toastbenachrichtigung in der CSS-Datei nach Ihren Wünschen gestalten:

.toast-Nachricht {
Hintergrundfarbe: #000000;
Farbe: #FFFFFF;
Schriftgröße: 20px;
Polsterung: 1Rest 0.5 Rest;
}

Als Ergebnis des obigen benutzerdefinierten Stils sieht die Benachrichtigung wie folgt aus:

Toastbenachrichtigungen für Ihre Webanwendung

Sie können jetzt benutzerdefinierte Benachrichtigungen in React erstellen, indem Sie das React-Toastify-Paket und die verfügbaren Methoden verwenden. Indem Sie diese benutzerdefinierten Warnungen/Benachrichtigungen nach Ihren Wünschen gestalten, können Sie die Benutzererfahrung Ihrer Webanwendung verbessern.

React-Toastify bietet eine schnelle und effektive Methode, um benutzerdefinierte Benachrichtigungen ohne viel Aufhebens in Ihr React-Projekt aufzunehmen.