Kako ustvariti komponento obvestila po meri v Reactu z uporabo SweetAlert

SweetAlert je priljubljena knjižnica, ki vam omogoča ustvarjanje prilagojenih komponent obvestil za vašo aplikacijo React. Z obvestili lahko uporabnike opozorite na pomembne informacije, napake ali uspešna dejanja v vaši aplikaciji. To prispeva k odlični uporabniški izkušnji.

Namestitev knjižnice SweetAlert

Za uporabo SweetAlert knjižnico za ustvarjanje obvestil, jo morate namestiti s katerim koli upraviteljem paketov po vaši izbiri.

Namestite ga lahko prek Upravitelj paketov NPM tako, da v terminalu zaženete naslednji ukaz:

npm namestite sweetalert --save

Uporaba SweetAlert za ustvarjanje obvestil

Ustvarjanje obvestil po meri v aplikaciji React s knjižnico SweetAlert je podobno z uporabo knjižnice Toastify. The pogoltniti funkcija, ki jo ponuja knjižnica SweetAlert, ustvari primerek komponente obvestila in definira lastnosti obvestila.

Tukaj je primer uporabe swal() funkcija za ustvarjanje komponente obvestila:

uvoz Reagiraj od'reagirati'
uvoz pogoltniti od'sweetalert'
funkcijoaplikacija() {
konst obvesti = () => lastovka ('Pozdravljeni');
vrnitev (



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

S klikom na gumb se prikliče pogoltniti funkcija, ki bo prikazala obvestilo s sporočilom "Hello There".

The pogoltniti funkcija ima tri parametre. Prvi parameter je naslov obvestila, drugi parameter je sporočilo, tretji pa ikona, ki bo prikazana v vašem obvestilu.

Lahko nastavite ikona parameter na eno od vnaprej določenih vrednosti, tj. uspeh, Opozorilo, napaka, oz info. Ikona obvestila bo nato temeljila na vrednostih, ki ste jih posredovali.

Na primer:

uvoz Reagiraj od'reagirati'
uvoz pogoltniti od'sweetalert'
funkcijoaplikacija() {
konst obvesti = () => lastovka ('Pozdravljeni', 'Dobrodošli na moji strani', 'uspeh');
vrnitev (



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

Ko uporabnik klikne gumb, pokliče obvestiti funkcijo. Ta funkcija bo nato prikazala obvestilo s sporočilom »Pozdravljeni« in »Dobrodošli na moji strani« z ikono za uspeh.

Alternativa uporabi pogoltniti funkcija s tremi parametri bi bila uporaba pogoltniti funkcijo s parametrom objekta. Ta parameter objekta vsebuje lastnosti, ki definirajo obvestilno komponento.

Na primer:

uvoz Reagiraj od'reagirati'
uvoz pogoltniti od'sweetalert'
funkcijoaplikacija() {
konst obvesti = () => lastovka (
 {
 naslov: 'Pozdravljeni',
 besedilo: 'Dobrodošli na moji strani',
 ikona: 'uspeh',
 gumb: 'V REDU',
 }
 );
vrnitev (



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

V zgornjem bloku kode je pogoltniti funkcija sprejme objekt z naslednjimi lastnostmi: naslov, besedilo, ikona, in gumb.

The naslov Lastnost določa naslov obvestila, medtem ko besedilo lastnost definira sporočilo. z ikona lastnosti, lahko določite vrsto ikone, prikazane v obvestilu.

Nazadnje, gumb Lastnost podaja besedilo gumba, prikazanega v obvestilu. V tem primeru gumb prikaže besedilo v redu.

Prilagajanje lastnosti gumba

Lahko prilagodite gumb lastnost vaše obvestilne komponente, da ustreza vašim potrebam oblikovanja. The gumb lastnost prevzame objekt z lastnostmi, ki se uporabljajo za konfiguriranje obnašanja in videza gumba.

Privzeti gumb vsebuje naslednje lastnosti:

lastovka (
 {
 gumb: {
 besedilo: "V REDU",
 vrednost: prav,
 vidno: prav,
 ime razreda: "",
 closeModal: prav
 },
 }
 );

V zgornjem kodnem bloku se z gumbom uporabljajo naslednje lastnosti:

• besedilo: Besedilo za prikaz na gumbu.
• vrednost: vrednost, ki se vrne, ko uporabnik klikne gumb. V tem primeru je vrednost prav.
• viden: Logična vrednost označuje, ali mora biti gumb viden.
• className: Niz, ki predstavlja razred CSS, ki se uporabi za gumb.
• closeModal: Logična vrednost, ki kaže, ali naj se modal zapre, ko kliknete gumb.

Prav tako lahko upodabljate več kot en gumb z uporabo matrike z gumbi premoženje. Matrika bo kot elemente vzela nize.

Na primer:

lastovka (
 {
 gumbi: ["Prekliči", "V redu"],
 }
 );

V tem primeru bo vaša obvestilna komponenta vsebovala dva gumba z besediloma preklicati in V redu. Nastavitev gumbi premoženje do lažno prikaže obvestilo brez gumba.

Upodabljanje elementov HTML znotraj komponente obvestila

Poleg navadnih nizov lahko kot obvestilo upodabljate tudi elemente HTML. To zagotavlja široko paleto možnosti prilagajanja.

Na primer:

uvoz Reagiraj od'reagirati'
uvoz pogoltniti od'sweetalert'
funkcijoaplikacija() {
konst obvesti = () => lastovka (
 {
 vsebina: {
 element: 'vhod',
 lastnosti: {
 rezervirano mesto: 'Ime',
 vrsta: 'besedilo'
 }
 },
 gumbi: 'Prijava'
 }
 )
vrnitev (

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

V tem primeru uporabite vsebino lastnost za upodobitev vnosnega polja z nadomestnim besedilom.

Vsebino obvestila določite z uporabo vsebino in element HTML za upodabljanje z element premoženje. Če želite določiti atribute elementa HTML, uporabite lastnosti premoženje.

Zgornji blok kode bo prikazal spodnje obvestilo, ko kliknete element gumba.

Oblikovanje komponente obvestila

Namesto da se držite privzetega sloga polja za obvestila, ki ga ponuja knjižnica SweetAlert, lahko prilagodite videz polja za obvestila tako, da uporabo lastnih slogov CSS.

Uporabili boste className lastnost, da dodate svoje sloge v obvestilo. The className lastnost definira razred CSS za obvestilo.

Na primer:

lastovka (
 {
 naslov: 'Pozdravljeni',
 besedilo: 'Dobrodošli na moji strani',
 gumb: lažno,
 ime razreda: 'opozorilo',
 }
 )

Obvestilo v zgornjem kodnem bloku ima a className vrednost opozorilo. Po ustvarjanju obvestila in definiranju className, boste določili svoje sloge CSS:

.opozorilo{
Barva ozadja: zelena;
družina pisav: kurziv;
mejni polmer: 15px;
}

Zgornji slogi CSS bodo veljali za obvestilo ob upodabljanju:

Zapiranje obvestilne komponente

Knjižnica SweetAlert ponuja več možnosti za prilagoditev načina zapiranja vaših obvestil. Te možnosti so closeOnEsc, closeOnClickOutside, in časovnik lastnosti.

The closeOnEsc Lastnost določa, ali se polje z obvestili zapre, ko uporabnik pritisne tipko Esc na tipkovnici. The closeOnEsc lastnost ima logično vrednost.

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

Privzeto je closeOnEsc lastnost je nastavljena na prav. V zgornjem bloku kode nastavljate closeOnEsc premoženje do lažno. Z nastavitvijo lastnosti na lažno, uporabnik ne more zapreti polja za obvestila s pritiskom na tipko Esc.

Določite lahko tudi, ali lahko uporabnik zapre polje z obvestili tako, da klikne zunaj polja z uporabo closeOnClickOutside premoženje.

Če je lastnost nastavljena na prav, the closeOnClickOutside Lastnost omogoča zapiranje okna z obvestili s klikom kjer koli zunaj njega. To je privzeto vedenje SweetAlert. Če želite preprečiti to vedenje, nastavite closeOnClickOutside premoženje do lažno.

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

z časovnik lastnost, lahko nastavite časovno omejitev, da se polje z obvestili samodejno zapre. The časovnik lastnost sprejme celoštevilsko vrednost v milisekundah.

lastovka (
 {
 ...,
 časovnik: 5000,
 }
 )

V tem primeru je časovnik lastnost je nastavljena na 5000. Obvestilo bo vidno samo 5 sekund.

Učinkovita obvestila po meri z uporabo SweetAlert

SweetAlert je zmogljiva knjižnica, s katero lahko ustvarite prilagojena obvestila v aplikaciji React. Uporaba knjižnice pogoltniti funkcijo, lahko zdaj ustvarite obvestila z lastnostmi in vedenjem po meri. Za ustvarjanje opozoril po meri v aplikaciji React lahko uporabite tudi druge knjižnice, kot je React-Toastify.