Kuidas luua kohandatud teavituskomponenti Reactis kasutades SweetAlert

SweetAlert on populaarne teek, mis annab teile võimaluse luua oma Reacti rakenduse jaoks kohandatud teavituskomponente. Saate kasutada märguandeid, et teavitada kasutajaid olulise teabe, vigade või edukate toimingute kohta teie rakenduses. See lisab suurepärase kasutajakogemuse.

SweetAlert Library installimine

Et kasutada SweetAlert teatiste loomiseks peate selle installima mis tahes teie valitud paketihalduri abil.

Saate selle installida kaudu NPM paketihaldur käivitades oma terminalis järgmise käsu:

npm install sweetalert --save

SweetAlerti kasutamine teatiste loomiseks

Kohandatud teatiste loomine rakenduses React SweetAlerti teegi abil on sarnane kasutades Toastify raamatukogu. The neelama SweetAlert teegi pakutav funktsioon loob teavituskomponendi eksemplari ja määratleb teatise atribuudid.

Siin on näide selle kasutamisest neelama () funktsioon teavituskomponendi loomiseks:

importida Reageerige alates'reageeri'





instagram viewer


importida neelama alates'sweetalert'
funktsiooniRakendus() {
konst teatama = () => neelama("Tere seal");
tagasi (



Klõpsake Mina</button>
 </div>
 )
}
eksportidavaikimisi Rakendus

Nupul klõpsates helistatakse neelama funktsioon, mis kuvab teatise teatega "Tere tulemast".

The neelama funktsioon võtab kolm parameetrit. Esimene parameeter on teatise pealkiri, teine ​​parameeter on sõnum ja kolmas on teatises kuvatav ikoon.

Saate määrata ikooni parameeter ühele eelmääratletud väärtustest, st edu, hoiatus, viga, või info. Seejärel põhineb teavitusikoon teie edastatud väärtustel.

Näiteks:

importida Reageerige alates'reageeri'
importida neelama alates'sweetalert'
funktsiooniRakendus() {
konst teatama = () => neelama("Tere seal", "Tere tulemast minu lehele", 'edu');
tagasi (



Klõpsake Mina</button>
 </div>
 )
}
eksportidavaikimisi Rakendus

Kui kasutaja klõpsab nuppu, helistab see teatama funktsiooni. See funktsioon kuvab seejärel teatise sõnumiga "Tere" ja "Tere tulemast minu lehele" koos eduikooniga.

Alternatiiv selle kasutamisele neelama funktsioon kolme parameetriga oleks kasutada neelama funktsiooni objektiparameetriga. See objektiparameeter sisaldab atribuute, mis määratlevad teavituskomponendi.

Näiteks:

importida Reageerige alates'reageeri'
importida neelama alates'sweetalert'
funktsiooniRakendus() {
konst teatama = () => neelama(
 {
 pealkiri: "Tere seal",
 tekst: "Tere tulemast minu lehele",
 ikoon: 'edu',
 nupp: 'OKEI',
 }
 );
tagasi (



Klõpsake Mina</button>
 </div>
 )
}
eksportidavaikimisi Rakendus

Ülaltoodud koodiplokis on neelama Funktsioon võtab objekti, millel on järgmised omadused: pealkiri, tekst, ikoonija nuppu.

The pealkiri atribuut määrab teatise pealkirja, samas kui atribuut tekst atribuut määrab sõnumi. Koos ikooni atribuut, saate määrata teatises kuvatava ikooni tüübi.

Lõpuks, nuppu atribuut määrab teates kuvatava nupu teksti. Sel juhul kuvab nupp teksti Okei.

Nupu atribuudi kohandamine

Saate kohandada nuppu teie teavituskomponendi omadus, et see sobiks teie disainivajadustega. The nuppu atribuut võtab objekti omadustega, mida kasutatakse nupu käitumise ja välimuse konfigureerimiseks.

Vaikimisi nupp sisaldab järgmisi atribuute.

neelama(
 {
 nupp: {
 tekst: "OKEI",
 väärtus: tõsi,
 nähtav: tõsi,
 klassi nimi: "",
 closeModal: tõsi
 },
 }
 );

Ülaltoodud koodiplokis kasutatakse nupuga järgmisi omadusi:

• tekst: nupul kuvatav tekst.
• väärtus: väärtus, mis tagastatakse, kui kasutaja klõpsab nuppu. Sel juhul on väärtus tõsi.
• nähtav: Boolean väärtus näitab, kas nupp peaks olema nähtav.
• klassi nimi: string, mis tähistab nupule rakendatavat CSS-klassi.
• closeModal: Boolean väärtus, mis näitab, kas modaal tuleks nupu klõpsamisel sulgeda.

Samuti saate renderdada rohkem kui ühe nupu, kasutades massiivi koos nupud vara. Massiiv võtab elementidena stringe.

Näiteks:

neelama(
 {
 nupud: ["Tühista", "Okei"],
 }
 );

Selles näites sisaldab teie teavituskomponent kahte nuppu tekstiga tühistada ja Okei. Seadistades nupud vara juurde vale kuvab teate ilma nuputa.

HTML-i elementide renderdamine teavituskomponendi sees

Samuti saate märguandina renderdada HTML-i elemente peale tavaliste stringide. See pakub laia valikut kohandamisvõimalusi.

Näiteks:

importida Reageerige alates'reageeri'
importida neelama alates'sweetalert'
funktsiooniRakendus() {
konst teatama = () => neelama(
 {
 sisu: {
 element: 'sisend',
 atribuudid: {
 kohatäide: 'Eesnimi',
 tüüp: 'tekst'
 }
 },
 nupud: 'Registreeri'
 }
 )
tagasi (

"rakendus">
Klõpsake Mina</button>
 </div>
 )
}
eksportidavaikimisi Rakendus

Selles näites kasutate sisu atribuut sisestusvälja koos kohahoidja tekstiga renderdamiseks.

Saate määrata teatise sisu, kasutades nuppu sisu atribuut ja HTML-element, mida koos renderdada element vara. HTML-elemendi atribuutide määramiseks kasutage atribuudid vara.

Ülaltoodud koodiplokk kuvab nupu elemendil klõpsamisel alloleva teate.

Teavituskomponendi stiil

Selle asemel, et järgida SweetAlert teegi pakutavat teavituskasti vaikestiili, saate kohandada teavituskasti välimust oma CSS-stiilide rakendamine.

Sa kasutad klassi nimi atribuut, et lisada teatisele oma stiile. The klassi nimi atribuut määrab teatise jaoks CSS-klassi.

Näiteks:

neelama(
 {
 pealkiri: "Tere seal",
 tekst: "Tere tulemast minu lehele",
 nupp: vale,
 klassi nimi: 'hoiatus',
 }
 )

Ülaltoodud koodiplokis oleval teatisel on a klassi nimi väärtus hoiatus. Pärast teatise loomist ja määratlemist klassi nimi, määrate oma CSS-stiilid:

.hoiatus{
taustavärv: roheline;
font-perekond: kursiiv;
piiriraadius: 15px;
}

Ülaltoodud CSS-stiilid kehtivad renderdamismärguandele:

Teavituskomponendi sulgemine

SweetAlerti teek pakub mitut valikut teatiste sulgemise viisi kohandamiseks. Need valikud on closeOnEsc, closeOnClickOutsideja taimer omadused.

The closeOnEsc atribuut määrab, kas teavituskast sulgub, kui kasutaja vajutab klaviatuuril klahvi Esc. The closeOnEsc atribuut võtab tõeväärtuse.

neelama(
 {
 ...,
 closeOnEsc: vale,
 }
 )

Vaikimisi on closeOnEsc atribuut on seatud tõsi. Ülaltoodud koodiplokis määrate closeOnEsc vara juurde vale. Määrates vara väärtuseks vale, ei saa kasutaja Esc-klahvi vajutades teavituskasti sulgeda.

Samuti saate määrata, kas kasutaja saab teavituskasti sulgeda, klõpsates kastist väljaspool, kasutades nuppu closeOnClickOutside vara.

Kui atribuut on seatud tõsi, closeOnClickOutside atribuut võimaldab teavituskasti sulgeda, klõpsates suvalises kohas väljaspool seda. See on SweetAlerti vaikekäitumine. Selle käitumise peatamiseks seadke closeOnClickOutside vara juurde vale.

neelama(
 {
 ...,
 closeOnClickOutside: vale,
 }
 )

Koos taimer atribuut, saate määrata ajapiirangu, mille jooksul teavituskast automaatselt sulgub. The taimer atribuut võtab täisarvu millisekundites.

neelama(
 {
 ...,
 taimer: 5000,
 }
 )

Selles näites on taimer atribuut on seatud 5000. Märguanne on nähtav ainult 5 sekundit.

Tõhusad kohandatud märguanded, kasutades SweetAlert

SweetAlert on võimas teek, mille abil saate Reacti rakenduses luua kohandatud teatisi. Kasutades raamatukogu neelama funktsiooni, saate nüüd koostada kohandatud atribuutide ja käitumisega teatisi. Reacti rakenduses kohandatud märguannete loomiseks saate kasutada ka muid teeke, näiteks React-Toastify.