SweetAlert-biblioteket gør det nemt at oprette tilpassede notifikationskomponenter i React.

SweetAlert er et populært bibliotek, der giver dig mulighed for at oprette tilpassede notifikationskomponenter til din React-applikation. Du kan bruge meddelelser til at advare brugere om vigtige oplysninger, fejl eller vellykkede handlinger i din applikation. Dette tilføjer op til en fantastisk brugeroplevelse.

Installation af SweetAlert-biblioteket

For at bruge SweetAlert bibliotek for at oprette meddelelser, skal du installere det ved hjælp af en hvilken som helst pakkeadministrator efter eget valg.

Du kan installere det via NPM pakke manager ved at køre følgende kommando i din terminal:

npm installer sweetalert --save

Brug af SweetAlert til at oprette meddelelser

Oprettelse af tilpassede meddelelser i din React-app ved hjælp af SweetAlert-biblioteket ligner ved hjælp af Toastify-biblioteket. Det svale funktion leveret af SweetAlert-biblioteket opretter en forekomst af meddelelseskomponenten og definerer meddelelsens egenskaber.

Her er et eksempel på brug af sval() funktion til at oprette en notifikationskomponent:

importere Reagere fra'reagere'
importere svale fra'swetalert'
fungereApp() {


konst underrette = () => svale('Hej med dig');


Vend tilbage (






eksportStandard App

Ved at klikke på knappen kaldes svale funktion, som vil vise en meddelelse med meddelelsen "Hej der".

Det svale funktion tager tre parametre. Den første parameter er titlen på meddelelsen, den anden parameter er meddelelsen, og den tredje er ikonet, der skal vises i din meddelelse.

Du kan indstille ikon parameter til en af ​​de foruddefinerede værdier, dvs. succes, advarsel, fejl, eller info. Meddelelsesikonet vil derefter være baseret på de værdier, du har bestået.

For eksempel:

importere Reagere fra'reagere'
importere svale fra'swetalert'
fungereApp() {


konst underrette = () => svale('Hej med dig', 'Velkommen til min side', 'succes');


Vend tilbage (






eksportStandard App

Når brugeren klikker på knappen, kalder den underrette fungere. Denne funktion vil derefter vise en meddelelse med beskeden "Hej der" og "Velkommen til min side" med et succesikon.

Et alternativ til at bruge svale funktion med de tre parametre ville være at bruge svale funktion med objektparameteren. Denne objektparameter indeholder egenskaber, der definerer meddelelseskomponenten.

For eksempel:

importere Reagere fra'reagere'
importere svale fra'swetalert'
fungereApp() {


konst underrette = () => svale(
 {
 titel: 'Hej med dig',
 tekst: 'Velkommen til min side',
 ikon: 'succes',
 knap: 'OKAY',
 }
 );


Vend tilbage (






eksportStandard App

I kodeblokken ovenfor er svale funktion tager et objekt med følgende egenskaber: titel, tekst, ikon, og knap.

Det titel ejendom angiver titlen på meddelelsen, mens tekst egenskab definerer meddelelsen. Med ikon egenskab, kan du angive den type ikon, der vises i meddelelsen.

Til sidst knap egenskab angiver teksten på knappen, der vises i meddelelsen. I dette tilfælde viser knappen teksten Okay.

Tilpasning af knapegenskaben

Du kan tilpasse knap egenskaben for din notifikationskomponent, så den passer til dine designbehov. Det knap egenskab tager et objekt med egenskaber, der bruges til at konfigurere opførsel og udseende af knappen.

En standardknap indeholder følgende egenskaber:

svale(
 {
 knap: {
 tekst: "OKAY",
 værdi: rigtigt,
 synlig: rigtigt,
 klassenavn: "",
 closeModal: rigtigt
 },
 }
 );

I kodeblokken ovenfor bruges følgende egenskaber med knappen:

  • tekst: Den tekst, der skal vises på knappen.
  • værdi: Værdien, der skal returneres, når brugeren klikker på knappen. I dette tilfælde er værdien rigtigt.
  • synlig: En boolesk værdi angiver, om knappen skal være synlig.
  • klassenavn: En streng, der repræsenterer CSS-klassen, der skal anvendes på knappen.
  • tætModal: En boolesk værdi, der angiver, om modalen skal lukkes, når der trykkes på knappen.

Du kan også gengive mere end én knap ved hjælp af et array med knapper ejendom. Arrayet vil tage strenge som sine elementer.

For eksempel:

svale(
 {
 knapper: ["Afbestille", "Okay"],
 }
 );

I dette eksempel vil din notifikationskomponent indeholde to knapper med teksterne' afbestille og Okay. Indstilling af knapper ejendom til falsk vil afgive en notifikation uden nogen knap.

Gengivelse af HTML-elementer inde i meddelelseskomponenten

Du kan også gengive HTML-elementer bortset fra almindelige strenge som en meddelelse. Dette giver en bred vifte af tilpasningsmuligheder.

For eksempel:

importere Reagere fra'reagere'
importere svale fra'swetalert'
fungereApp() {


konst underrette = () => svale(
 {
 indhold: {
 element: 'input',
 egenskaber: {
 pladsholder: 'Fornavn',
 type: 'tekst'
 }
 },
 knapper: 'Tilmelde'
 }
 )


Vend tilbage (


"app">


eksportStandard App

I dette eksempel bruger du indhold egenskab for at gengive et inputfelt med pladsholdertekst.

Du angiver indholdet af meddelelsen ved hjælp af indhold egenskaben og HTML-elementet for at gengive med element ejendom. For at angive attributterne for HTML-elementet, bruger du egenskaber ejendom.

Kodeblokken ovenfor giver nedenstående meddelelse, når du klikker på knapelementet.

Stiling af meddelelseskomponenten

I stedet for at overholde standardmeddelelsesboksens stil, der leveres af SweetAlert-biblioteket, kan du tilpasse udseendet af meddelelsesboksen ved at at anvende dine egne CSS-stile.

Du vil bruge klassenavn ejendom for at føje dine stilarter til meddelelsen. Det klassenavn egenskaben definerer en CSS-klasse for meddelelsen.

For eksempel:

svale(
 {
 titel: 'Hej med dig',
 tekst: 'Velkommen til min side',
 knap: falsk,
 klassenavn: 'alert',
 }
 )

Meddelelsen i kodeblokken ovenfor har en klassenavn værdi alert. Efter at have oprettet meddelelsen og defineret klassenavn, vil du definere dine CSS-stile:

.alert{
baggrundsfarve: grøn;
skrifttype-familie: kursiv;
grænse-radius: 15px;
}

CSS-stilene ovenfor vil gælde for meddelelsen ved gengivelse:

Lukning af meddelelseskomponenten

SweetAlert-biblioteket giver flere muligheder for at tilpasse den måde, dine meddelelser lukkes på. Disse muligheder er closeOnEsc, closeOnClickOutside, og timer ejendomme.

Det closeOnEsc egenskaben bestemmer, om meddelelsesboksen lukkes, når brugeren trykker på Esc-tasten på sit tastatur. Det closeOnEsc ejendom har en boolsk værdi.

svale(
 {
 ...,
 closeOnEsc: falsk,
 }
 )

Som standard er closeOnEsc egenskab er indstillet til rigtigt. I kodeblokken ovenfor indstiller du closeOnEsc ejendom til falsk. Ved at indstille ejendommen til falsk, kan brugeren ikke lukke meddelelsesboksen ved at trykke på Esc-tasten.

Du kan også bestemme, om brugeren kan lukke notifikationsboksen ved at klikke uden for boksen ved hjælp af closeOnClickOutside ejendom.

Hvis ejendommen er indstillet til rigtigt, det closeOnClickOutside egenskaben gør det muligt at lukke meddelelsesboksen ved at klikke et vilkårligt sted uden for den. Dette er standardadfærden for SweetAlert. For at stoppe denne adfærd skal du indstille closeOnClickOutside ejendom til falsk.

svale(
 {
 ...,
 closeOnClickOutside: falsk,
 }
 )

Med timer ejendom, kan du indstille en tidsgrænse for, at notifikationsboksen automatisk lukker sig selv. Det timer egenskaben tager en heltalsværdi i millisekunder.

svale(
 {
 ...,
 timer: 5000,
 }
 )

I dette eksempel er timer egenskab er indstillet til 5000. Meddelelsen vil kun være synlig i 5 sekunder.

Effektive brugerdefinerede meddelelser ved hjælp af SweetAlert

SweetAlert er et kraftfuldt bibliotek, som du kan bruge til at oprette tilpassede meddelelser i en React-applikation. Brug af bibliotekets svale funktion, kan du nu bygge meddelelser med tilpassede egenskaber og adfærd. Du kan også gøre brug af andre biblioteker som React-Toastify til at oprette brugerdefinerede advarsler i en React-applikation.