SweetAlert-biblioteket gjør det enkelt å lage tilpassede varslingskomponenter i React.

SweetAlert er et populært bibliotek som gir deg muligheten til å lage tilpassede varslingskomponenter for din React-applikasjon. Du kan bruke varsler for å varsle brukere om viktig informasjon, feil eller vellykkede handlinger i applikasjonen din. Dette gir en god brukeropplevelse.

Installere SweetAlert-biblioteket

For å bruke SweetAlert biblioteket for å lage varsler, må du installere det ved å bruke hvilken som helst pakkebehandling du ønsker.

Du kan installere den via NPM pakkeansvarlig ved å kjøre følgende kommando i terminalen din:

npm installer sweetalert --save

Bruke SweetAlert til å lage varsler

Å lage tilpassede varsler i React-appen din ved å bruke SweetAlert-biblioteket ligner på ved å bruke Toastify-biblioteket. De svale funksjonen levert av SweetAlert-biblioteket oppretter en forekomst av varslingskomponenten og definerer varslingens egenskaper.

Her er et eksempel på bruk av sval() funksjon for å opprette en varslingskomponent:

instagram viewer 
import Reagere fra'reagere'
import svale fra'swetalert'
funksjonApp() {


konst gi beskjed = () => svale('Hei der');


komme tilbake (






eksportmisligholde App

Ved å klikke på knappen vil du ringe opp svale funksjon, som vil vise et varsel med "Hello There"-meldingen.

De svale funksjonen tar tre parametere. Den første parameteren er tittelen på varselet, den andre parameteren er meldingen, og den tredje er ikonet som skal vises i varselet.

Du kan stille inn ikon parameter til en av de forhåndsdefinerte verdiene, dvs. suksess, advarsel, feil, eller info. Varslingsikonet vil da være basert på verdiene du passerte.

For eksempel:

import Reagere fra'reagere'
import svale fra'swetalert'
funksjonApp() {


konst gi beskjed = () => svale('Hei der', 'Velkommen til min side', 'suksess');


komme tilbake (






eksportmisligholde App

Når brukeren klikker på knappen, kaller den opp gi beskjed funksjon. Denne funksjonen vil da vise et varsel med meldingen "Hei der" og "Velkommen til min side" med et suksessikon.

Et alternativ til å bruke svale funksjon med de tre parameterne ville være å bruke svale funksjon med objektparameteren. Denne objektparameteren inneholder egenskaper som definerer varslingskomponenten.

For eksempel:

import Reagere fra'reagere'
import svale fra'swetalert'
funksjonApp() {


konst gi beskjed = () => svale(
 {
 tittel: 'Hei der',
 tekst: 'Velkommen til min side',
 ikon: 'suksess',
 knapp: 'OK',
 }
 );


komme tilbake (






eksportmisligholde App

I kodeblokken ovenfor vises svale funksjonen tar et objekt med følgende egenskaper: tittel, tekst, ikon, og knapp.

De tittel egenskapen angir tittelen på varselet, mens tekst egenskap definerer meldingen. Med ikon egenskap, kan du spesifisere typen ikon som vises i varselet.

Til slutt, den knapp egenskap angir teksten til knappen som vises i varselet. I dette tilfellet viser knappen teksten OK.

Tilpasse knappegenskapen

Du kan tilpasse knapp egenskapen til varslingskomponenten for å passe dine designbehov. De knapp egenskap tar et objekt med egenskaper som brukes til å konfigurere virkemåten og utseendet til knappen.

En standardknapp inneholder følgende egenskaper:

svale(
 {
 knapp: {
 tekst: "OK",
 verdi: ekte,
 synlig: ekte,
 klassenavn: "",
 closeModal: ekte
 },
 }
 );

I kodeblokken ovenfor brukes følgende egenskaper med knappen:

  • tekst: Teksten som skal vises på knappen.
  • verdi: Verdien som skal returneres når brukeren klikker på knappen. I dette tilfellet er verdien ekte.
  • synlig: En boolsk verdi indikerer om knappen skal være synlig.
  • klassenavn: En streng som representerer CSS-klassen som skal brukes på knappen.
  • closeModal: En boolsk verdi som indikerer om modalen skal lukkes når knappen klikkes.

Du kan også gjengi mer enn én knapp ved å bruke en matrise med knapper eiendom. Matrisen vil ta strenger som sine elementer.

For eksempel:

svale(
 {
 knapper: ["Avbryt", "Ok"],
 }
 );

I dette eksemplet vil varslingskomponenten din inneholde to knapper med tekstene Avbryt og Ok. Innstilling av knapper eiendom til falsk vil gi et varsel uten knapp.

Gjengivelse av HTML-elementer inne i varslingskomponenten

Du kan også gjengi HTML-elementer bortsett fra vanlige strenger som et varsel. Dette gir et bredt spekter av tilpasningsmuligheter.

For eksempel:

import Reagere fra'reagere'
import svale fra'swetalert'
funksjonApp() {


konst gi beskjed = () => svale(
 {
 innhold: {
 element: 'inngang',
 attributter: {
 plassholder: 'Fornavn',
 type: 'tekst'
 }
 },
 knapper: 'Melde deg på'
 }
 )


komme tilbake (


"app">


eksportmisligholde App

I dette eksemplet bruker du innhold egenskap for å gjengi et inndatafelt med plassholdertekst.

Du spesifiserer innholdet i varselet ved å bruke innhold egenskapen og HTML-elementet for å gjengi med element eiendom. For å spesifisere attributtene til HTML-elementet, bruker du attributter eiendom.

Kodeblokken ovenfor vil gjengi varselet nedenfor når du klikker på knappeelementet.

Styling av varslingskomponenten

I stedet for å følge standard stilen for varslingsbokser levert av SweetAlert-biblioteket, kan du tilpasse utseendet til varslingsboksen ved å bruke dine egne CSS-stiler.

Du vil bruke klassenavn eiendom for å legge til stilene dine i varselet. De klassenavn egenskapen definerer en CSS-klasse for varselet.

For eksempel:

svale(
 {
 tittel: 'Hei der',
 tekst: 'Velkommen til min side',
 knapp: falsk,
 klassenavn: 'varsling',
 }
 )

Varslingen i kodeblokken ovenfor har en klassenavn verdi varsling. Etter å ha opprettet varselet og definert klassenavn, vil du definere CSS-stilene dine:

.varsling{
bakgrunnsfarge: grønn;
font-familie: kursiv;
grense-radius: 15px;
}

CSS-stilene ovenfor vil gjelde for varselet ved gjengivelse:

Lukke varslingskomponenten

SweetAlert-biblioteket gir flere alternativer for å tilpasse måten varslene dine lukkes på. Disse alternativene er closeOnEsc, closeOnClickOutside, og tidtaker egenskaper.

De closeOnEsc egenskapen bestemmer om varslingsboksen lukkes når brukeren trykker på Esc-tasten på tastaturet. De closeOnEsc eiendom har en boolsk verdi.

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

Som standard er closeOnEsc egenskapen er satt til ekte. I kodeblokken ovenfor angir du closeOnEsc eiendom til falsk. Ved å sette eiendommen til falsk, kan ikke brukeren lukke varslingsboksen ved å trykke på Esc-tasten.

Du kan også bestemme om brukeren kan lukke varslingsboksen ved å klikke utenfor boksen ved å bruke closeOnClickOutside eiendom.

Hvis egenskapen er satt til ekte, den closeOnClickOutside egenskapen gjør det mulig å lukke varslingsboksen ved å klikke hvor som helst utenfor den. Dette er standardoppførselen til SweetAlert. For å stoppe denne oppførselen, still inn closeOnClickOutside eiendom til falsk.

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

Med tidtaker eiendom, kan du angi en tidsbegrensning for at varslingsboksen automatisk skal lukke seg. De tidtaker egenskapen tar en heltallsverdi i millisekunder.

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

I dette eksemplet er tidtaker egenskapen er satt til 5000. Varselet vil bare være synlig i 5 sekunder.

Effektive tilpassede varsler ved hjelp av SweetAlert

SweetAlert er et kraftig bibliotek som du kan bruke til å lage tilpassede varsler i en React-applikasjon. Bruker bibliotekets svale funksjon, kan du nå bygge varsler med tilpassede egenskaper og oppførsel. Du kan også bruke andre biblioteker som React-Toastify for å lage tilpassede varsler i en React-applikasjon.