Mit der SweetAlert-Bibliothek können Sie ganz einfach benutzerdefinierte Benachrichtigungskomponenten in React erstellen.

SweetAlert ist eine beliebte Bibliothek, mit der Sie benutzerdefinierte Benachrichtigungskomponenten für Ihre React-Anwendung erstellen können. Mithilfe von Benachrichtigungen können Sie Benutzer über wichtige Informationen, Fehler oder erfolgreiche Aktionen in Ihrer Anwendung informieren. Dies führt zu einem großartigen Benutzererlebnis.

Installieren der SweetAlert-Bibliothek

Um das zu nutzen SweetAlert Um die Bibliothek zum Erstellen von Benachrichtigungen zu nutzen, müssen Sie sie mit einem beliebigen Paketmanager Ihrer Wahl installieren.

Sie können es über installieren NPM-Paketmanager indem Sie den folgenden Befehl in Ihrem Terminal ausführen:

npm install sweetalert --save

Verwenden von SweetAlert zum Erstellen von Benachrichtigungen

Das Erstellen benutzerdefinierter Benachrichtigungen in Ihrer React-App mithilfe der SweetAlert-Bibliothek ähnelt unter Verwendung der Toastify-Bibliothek

instagram viewer
. Der swal Die von der SweetAlert-Bibliothek bereitgestellte Funktion erstellt eine Instanz der Benachrichtigungskomponente und definiert die Eigenschaften der Benachrichtigung.

Hier ist ein Beispiel für die Verwendung von swal() Funktion zum Erstellen einer Benachrichtigungskomponente:

importieren Reagieren aus'reagieren'
importieren swal aus'sweetalert'
FunktionApp() {


const benachrichtigen = () => swal('Hallo');


zurückkehren (






ExportStandard App

Durch Klicken auf die Schaltfläche wird die aufgerufen swal Funktion, die eine Benachrichtigung mit der Nachricht „Hallo da“ anzeigt.

Der swal Die Funktion benötigt drei Parameter. Der erste Parameter ist der Titel der Benachrichtigung, der zweite Parameter ist die Nachricht und der dritte Parameter ist das Symbol, das in Ihrer Benachrichtigung angezeigt werden soll.

Sie können das einstellen Symbol Parameter auf einen der vordefinierten Werte, d. h. Erfolg, Warnung, Fehler, oder die Info. Das Benachrichtigungssymbol basiert dann auf den von Ihnen übergebenen Werten.

Zum Beispiel:

importieren Reagieren aus'reagieren'
importieren swal aus'sweetalert'
FunktionApp() {


const benachrichtigen = () => swal('Hallo', 'Wilkommen auf meiner Seite', 'Erfolg');


zurückkehren (






ExportStandard App

Wenn der Benutzer auf die Schaltfläche klickt, wird die aufgerufen benachrichtigen Funktion. Diese Funktion zeigt dann eine Benachrichtigung mit der Meldung „Hallo“ und „Willkommen auf meiner Seite“ mit einem Erfolgssymbol an.

Eine Alternative zur Verwendung von swal Funktion mit den drei Parametern wäre die Verwendung der swal Funktion mit dem Objektparameter. Dieser Objektparameter enthält Eigenschaften, die die Benachrichtigungskomponente definieren.

Zum Beispiel:

importieren Reagieren aus'reagieren'
importieren swal aus'sweetalert'
FunktionApp() {


const benachrichtigen = () => swal(
 {
 Titel: 'Hallo',
 Text: 'Wilkommen auf meiner Seite',
 Symbol: 'Erfolg',
 Taste: 'OK',
 }
 );


zurückkehren (






ExportStandard App

Im Codeblock oben ist die swal Die Funktion akzeptiert ein Objekt mit den folgenden Eigenschaften: Titel, Text, Symbol, Und Taste.

Der Titel Die Eigenschaft gibt den Titel der Benachrichtigung an, während die Text Die Eigenschaft definiert die Nachricht. Mit dem Symbol Mit der Eigenschaft können Sie den Typ des in der Benachrichtigung angezeigten Symbols angeben.

Schließlich die Taste Die Eigenschaft gibt den Text der Schaltfläche an, die in der Benachrichtigung angezeigt wird. In diesem Fall zeigt die Schaltfläche den Text an OK.

Anpassen der Button-Eigenschaft

Sie können die anpassen Taste Passen Sie die Eigenschaft Ihrer Benachrichtigungskomponente an Ihre Designanforderungen an. Der Taste Die Eigenschaft nimmt ein Objekt mit Eigenschaften an, die zum Konfigurieren des Verhaltens und Erscheinungsbilds der Schaltfläche verwendet werden.

Eine Standardschaltfläche enthält die folgenden Eigenschaften:

swal(
 {
 Taste: {
 Text: "OK",
 Wert: WAHR,
 sichtbar: WAHR,
 Klassenname: "",
 closeModal: WAHR
 },
 }
 );

Im obigen Codeblock werden die folgenden Eigenschaften mit der Schaltfläche verwendet:

  • Text: Der Text, der auf der Schaltfläche angezeigt werden soll.
  • Wert: Der Wert, der zurückgegeben werden soll, wenn der Benutzer auf die Schaltfläche klickt. In diesem Fall ist der Wert WAHR.
  • sichtbar: Ein boolescher Wert gibt an, ob die Schaltfläche sichtbar sein soll.
  • Klassenname: Eine Zeichenfolge, die die CSS-Klasse darstellt, die auf die Schaltfläche angewendet werden soll.
  • closeModal: Ein boolescher Wert, der angibt, ob das Modal geschlossen werden soll, wenn auf die Schaltfläche geklickt wird.

Sie können auch mehr als eine Schaltfläche mithilfe eines Arrays mit rendern Tasten Eigentum. Das Array nimmt Zeichenfolgen als Elemente an.

Zum Beispiel:

swal(
 {
 Tasten: ["Stornieren", "OK"],
 }
 );

In diesem Beispiel enthält Ihre Benachrichtigungskomponente zwei Schaltflächen mit den Texten stornieren Und OK. Einstellen der Tasten Eigentum zu FALSCH gibt eine Benachrichtigung ohne Schaltfläche aus.

Rendern von HTML-Elementen innerhalb der Benachrichtigungskomponente

Sie können neben einfachen Zeichenfolgen auch HTML-Elemente als Benachrichtigung rendern. Dadurch stehen vielfältige Individualisierungsmöglichkeiten zur Verfügung.

Zum Beispiel:

importieren Reagieren aus'reagieren'
importieren swal aus'sweetalert'
FunktionApp() {


const benachrichtigen = () => swal(
 {
 Inhalt: {
 Element: 'Eingang',
 Attribute: {
 Platzhalter: 'Vorname',
 Typ: 'Text'
 }
 },
 Tasten: 'Anmeldung'
 }
 )


zurückkehren (


„App“>


ExportStandard App

In diesem Beispiel verwenden Sie die Inhalt Eigenschaft zum Rendern eines Eingabefelds mit Platzhaltertext.

Den Inhalt der Benachrichtigung legen Sie mit fest Inhalt -Eigenschaft und das HTML-Element, das mit dem gerendert werden soll Element Eigentum. Um die Attribute des HTML-Elements anzugeben, verwenden Sie die Attribute Eigentum.

Der obige Codeblock rendert die folgende Benachrichtigung, wenn Sie auf das Schaltflächenelement klicken.

Gestalten der Benachrichtigungskomponente

Anstatt sich an den von der SweetAlert-Bibliothek bereitgestellten Standardstil des Benachrichtigungsfelds zu halten, können Sie das Erscheinungsbild des Benachrichtigungsfelds anpassen Anwenden Ihrer eigenen CSS-Stile.

Sie werden die verwenden Klassenname -Eigenschaft, um Ihre Stile zur Benachrichtigung hinzuzufügen. Der Klassenname Die Eigenschaft definiert eine CSS-Klasse für die Benachrichtigung.

Zum Beispiel:

swal(
 {
 Titel: 'Hallo',
 Text: 'Wilkommen auf meiner Seite',
 Taste: FALSCH,
 Klassenname: 'Alarm',
 }
 )

Die Benachrichtigung im Codeblock oben hat eine Klassenname Wert Alarm. Nach dem Erstellen der Benachrichtigung und dem Definieren der Klassenname, definieren Sie Ihre CSS-Stile:

.Alarm{
Hintergrundfarbe: Grün;
Schriftfamilie: kursiv;
Grenzradius: 15px;
}

Die oben genannten CSS-Stile gelten für die Benachrichtigung beim Rendern:

Schließen der Benachrichtigungskomponente

Die SweetAlert-Bibliothek bietet mehrere Optionen zum Anpassen der Art und Weise, wie Ihre Benachrichtigungen geschlossen werden. Diese Optionen sind die closeOnEsc, closeOnClickOutside, Und Timer Eigenschaften.

Der closeOnEsc Die Eigenschaft bestimmt, ob das Benachrichtigungsfeld geschlossen wird, wenn der Benutzer die Esc-Taste auf seiner Tastatur drückt. Der closeOnEsc Die Eigenschaft nimmt einen booleschen Wert an.

swal(
 {
 ...,
 closeOnEsc: FALSCH,
 }
 )

Standardmäßig ist die closeOnEsc Die Eigenschaft ist auf festgelegt WAHR. Im Codeblock oben legen Sie fest closeOnEsc Eigentum zu FALSCH. Durch Festlegen der Eigenschaft auf FALSCH, kann der Benutzer das Benachrichtigungsfeld nicht durch Drücken der Esc-Taste schließen.

Sie können auch festlegen, ob der Benutzer das Benachrichtigungsfeld schließen kann, indem er mithilfe von außerhalb des Felds klickt closeOnClickOutside Eigentum.

Wenn die Eigenschaft auf festgelegt ist WAHR, Die closeOnClickOutside Die Eigenschaft ermöglicht das Schließen des Benachrichtigungsfelds durch Klicken auf eine beliebige Stelle außerhalb des Felds. Dies ist das Standardverhalten von SweetAlert. Um dieses Verhalten zu stoppen, legen Sie fest closeOnClickOutside Eigentum zu FALSCH.

swal(
 {
 ...,
 closeOnClickOutside: FALSCH,
 }
 )

Mit dem Timer Mit dieser Eigenschaft können Sie ein Zeitlimit festlegen, nach dem sich das Benachrichtigungsfeld automatisch schließt. Der Timer Die Eigenschaft nimmt einen ganzzahligen Wert in Millisekunden an.

swal(
 {
 ...,
 Timer: 5000,
 }
 )

In diesem Beispiel ist die Timer Die Eigenschaft ist auf festgelegt 5000. Die Benachrichtigung ist nur 5 Sekunden lang sichtbar.

Effiziente benutzerdefinierte Benachrichtigungen mit SweetAlert

SweetAlert ist eine leistungsstarke Bibliothek, mit der Sie benutzerdefinierte Benachrichtigungen in einer React-Anwendung erstellen können. Nutzung der Bibliothek swal Mit der Funktion können Sie jetzt Benachrichtigungen mit benutzerdefinierten Eigenschaften und Verhalten erstellen. Sie können auch andere Bibliotheken wie React-Toastify nutzen, um benutzerdefinierte Warnungen in einer React-Anwendung zu erstellen.