Kako stvoriti prilagođenu komponentu obavijesti u Reactu koristeći SweetAlert

SweetAlert je popularna biblioteka koja vam daje mogućnost stvaranja prilagođenih komponenti obavijesti za vašu React aplikaciju. Obavijesti možete koristiti za upozoravanje korisnika o važnim informacijama, pogreškama ili uspješnim radnjama unutar vaše aplikacije. To doprinosi izvrsnom korisničkom iskustvu.

Instaliranje biblioteke SweetAlert

Za korištenje SweetAlert biblioteku za stvaranje obavijesti, morate je instalirati koristeći bilo koji upravitelj paketa po vašem izboru.

Možete ga instalirati putem NPM upravitelj paketa pokretanjem sljedeće naredbe na vašem terminalu:

npm instaliraj sweetalert --save

Korištenje SweetAlert za stvaranje obavijesti

Stvaranje prilagođenih obavijesti u vašoj aplikaciji React pomoću biblioteke SweetAlert slično je koristeći biblioteku Toastify. The progutati funkcija koju pruža biblioteka SweetAlert stvara instancu komponente obavijesti i definira svojstva obavijesti.

Evo primjera korištenja progutati () funkcija za stvaranje komponente obavijesti:

uvoz Reagirati iz'reagirati'
uvoz progutati iz'sweetalert'
funkcijaaplikacija() {
konst obavijestiti = () => progutati ('Zdravo');
povratak (



Kliknite Me</button>
 </div>
 )
}
izvozzadano aplikacija

Klikom na gumb pozvati ćete progutati koja će prikazati obavijest s porukom "Hello There".

The progutati funkcija ima tri parametra. Prvi parametar je naslov obavijesti, drugi parametar je poruka, a treći je ikona koja će se prikazati u vašoj obavijesti.

Možete postaviti ikona parametar na jednu od unaprijed definiranih vrijednosti, tj. uspjeh, upozorenje, greška, ili info. Ikona obavijesti tada će se temeljiti na vrijednostima koje ste proslijedili.

Na primjer:

uvoz Reagirati iz'reagirati'
uvoz progutati iz'sweetalert'
funkcijaaplikacija() {
konst obavijestiti = () => progutati ('Zdravo', 'Dobrodošli na moju stranicu', 'uspjeh');
povratak (



Kliknite Me</button>
 </div>
 )
}
izvozzadano aplikacija

Kada korisnik klikne gumb, on poziva obavijestiti funkcija. Ova će funkcija zatim prikazati obavijest s porukom "Hello There" i "Dobrodošli na moju stranicu" s ikonom uspjeha.

Alternativa korištenju progutati funkcija s tri parametra bila bi upotreba progutati funkcija s parametrom objekta. Ovaj parametar objekta sadrži svojstva koja definiraju komponentu obavijesti.

Na primjer:

uvoz Reagirati iz'reagirati'
uvoz progutati iz'sweetalert'
funkcijaaplikacija() {
konst obavijestiti = () => progutati (
 {
 titula: 'Zdravo',
 tekst: 'Dobrodošli na moju stranicu',
 ikona: 'uspjeh',
 dugme: 'U REDU',
 }
 );
povratak (



Kliknite Me</button>
 </div>
 )
}
izvozzadano aplikacija

U gornjem bloku koda, progutati funkcija uzima objekt sa sljedećim svojstvima: titula, tekst, ikona, i dugme.

The titula svojstvo navodi naslov obavijesti, dok tekst svojstvo definira poruku. s ikona svojstvo, možete odrediti vrstu ikone prikazane u obavijesti.

Na kraju, dugme svojstvo specificira tekst gumba prikazanog u obavijesti. U tom slučaju gumb prikazuje tekst u redu.

Prilagođavanje svojstva gumba

Možete prilagoditi dugme svojstvo vaše komponente obavijesti da odgovara vašim potrebama dizajna. The dugme property uzima objekt sa svojstvima koja se koriste za konfiguriranje ponašanja i izgleda gumba.

Zadani gumb sadrži sljedeća svojstva:

progutati (
 {
 dugme: {
 tekst: "U REDU",
 vrijednost: pravi,
 vidljivo: pravi,
 naziv klase: "",
 closeModal: pravi
 },
 }
 );

U gornjem bloku koda, sljedeća svojstva se koriste s gumbom:

• tekst: Tekst za prikaz na gumbu.
• vrijednost: Vrijednost koja se vraća kada korisnik klikne gumb. U ovom slučaju vrijednost je pravi.
• vidljivo: Booleova vrijednost označava treba li gumb biti vidljiv.
• naziv klase: Niz koji predstavlja CSS klasu koja se primjenjuje na gumb.
• closeModal: Booleova vrijednost koja pokazuje treba li se modal zatvoriti kada se pritisne gumb.

Također možete prikazati više od jednog gumba pomoću niza s gumbi vlasništvo. Niz će uzeti nizove kao svoje elemente.

Na primjer:

progutati (
 {
 gumbi: ["Otkazati", "U redu"],
 }
 );

U ovom primjeru, vaša komponenta obavijesti sadržavat će dva gumba s tekstovima otkazati i U redu. Postavljanje gumbi vlasništvo na lažno prikazat će obavijest bez gumba.

Prikaz HTML elemenata unutar komponente obavijesti

Također možete prikazati HTML elemente osim običnih nizova kao obavijest. To pruža širok raspon mogućnosti prilagodbe.

Na primjer:

uvoz Reagirati iz'reagirati'
uvoz progutati iz'sweetalert'
funkcijaaplikacija() {
konst obavijestiti = () => progutati (
 {
 sadržaj: {
 element: 'ulazni',
 atributi: {
 rezerviranog mjesta: 'Ime',
 tip: 'tekst'
 }
 },
 gumbi: 'Prijava'
 }
 )
povratak (

"aplikacija">
Kliknite Me</button>
 </div>
 )
}
izvozzadano aplikacija

U ovom primjeru koristite sadržaj svojstvo za prikaz polja za unos s tekstom rezerviranog mjesta.

Vi određujete sadržaj obavijesti pomoću sadržaj svojstvo i HTML element za prikaz s element vlasništvo. Da biste odredili atribute HTML elementa, koristite atributi vlasništvo.

Gornji blok koda prikazat će donju obavijest kada kliknete element gumba.

Oblikovanje komponente obavijesti

Umjesto da se pridržavate zadanog stila okvira obavijesti koje nudi biblioteka SweetAlert, možete prilagoditi izgled okvira obavijesti tako da primjenom vlastitih CSS stilova.

Vi ćete koristiti naziv klase svojstvo za dodavanje vaših stilova u obavijest. The naziv klase svojstvo definira CSS klasu za obavijest.

Na primjer:

progutati (
 {
 titula: 'Zdravo',
 tekst: 'Dobrodošli na moju stranicu',
 dugme: lažno,
 naziv klase: 'upozorenje',
 }
 )

Obavijest u gornjem bloku koda ima a naziv klase vrijednost uzbuna. Nakon izrade obavijesti i definiranja naziv klase, definirat ćete svoje CSS stilove:

.uzbuna{
boja pozadine: zelena;
obitelj-fontova: rukopisni;
granični radijus: 15px;
}

Gore navedeni CSS stilovi primijenit će se na obavijest o generiranju:

Zatvaranje komponente obavijesti

Knjižnica SweetAlert nudi nekoliko opcija za prilagodbu načina na koji se vaše obavijesti zatvaraju. Ove opcije su zatvoriOnEsc, closeOnClickOutside, i mjerač vremena Svojstva.

The zatvoriOnEsc Svojstvo određuje hoće li se okvir s obavijestima zatvoriti kada korisnik pritisne tipku Esc na tipkovnici. The zatvoriOnEsc svojstvo ima Booleovu vrijednost.

progutati (
 {
 ...,
 closeOnEsc: lažno,
 }
 )

Prema zadanim postavkama, zatvoriOnEsc svojstvo je postavljeno na pravi. U gornjem bloku koda postavljate zatvoriOnEsc vlasništvo na lažno. Postavljanjem svojstva na lažno, korisnik ne može zatvoriti okvir s obavijestima pritiskom na tipku Esc.

Također možete odrediti može li korisnik zatvoriti okvir s obavijesti klikom izvan okvira pomoću closeOnClickOutside vlasništvo.

Ako je svojstvo postavljeno na pravi, the closeOnClickOutside svojstvo omogućuje zatvaranje okvira obavijesti klikom bilo gdje izvan njega. Ovo je zadano ponašanje SweetAlert-a. Da biste zaustavili ovo ponašanje, postavite closeOnClickOutside vlasništvo na lažno.

progutati (
 {
 ...,
 closeOnClickOutside: lažno,
 }
 )

s mjerač vremena možete postaviti vremensko ograničenje za automatsko zatvaranje okvira za obavijesti. The mjerač vremena svojstvo ima cjelobrojnu vrijednost u milisekundama.

progutati (
 {
 ...,
 mjerač vremena: 5000,
 }
 )

U ovom primjeru, mjerač vremena svojstvo je postavljeno na 5000. Obavijest će biti vidljiva samo 5 sekundi.

Učinkovite prilagođene obavijesti koristeći SweetAlert

SweetAlert je moćna biblioteka pomoću koje možete kreirati prilagođene obavijesti u React aplikaciji. Korištenje knjižnice progutati funkciju, sada možete izraditi obavijesti s prilagođenim svojstvima i ponašanjem. Također možete koristiti druge biblioteke poput React-Toastify za stvaranje prilagođenih upozorenja u React aplikaciji.