Kā izveidot pielāgotu paziņojumu komponentu programmā React, izmantojot SweetAlert

SweetAlert ir populāra bibliotēka, kas sniedz iespēju jūsu React lietojumprogrammai izveidot pielāgotus paziņojumu komponentus. Varat izmantot paziņojumus, lai brīdinātu lietotājus par svarīgu informāciju, kļūdām vai veiksmīgām darbībām jūsu lietojumprogrammā. Tas nodrošina lielisku lietotāja pieredzi.

SweetAlert bibliotēkas instalēšana

Lai izmantotu SweetAlert bibliotēkā, lai izveidotu paziņojumus, jums tā jāinstalē, izmantojot jebkuru pakotņu pārvaldnieku pēc jūsu izvēles.

Jūs varat to instalēt, izmantojot NPM pakotņu pārvaldnieks terminālī izpildot šādu komandu:

npm instalēt sweetalert --save

SweetAlert izmantošana paziņojumu izveidei

Pielāgotu paziņojumu izveide React lietotnē, izmantojot SweetAlert bibliotēku, ir līdzīga izmantojot Toastify bibliotēku. The swal SweetAlert bibliotēkas nodrošinātā funkcija izveido paziņojumu komponenta gadījumu un definē paziņojuma rekvizītus.

Šeit ir piemērs, kā izmantot swal () funkcija, lai izveidotu paziņojumu komponentu:

imports Reaģēt no'reaģēt'
imports swal no'sweetalert'
funkcijuApp() {
konst paziņot = () => swal('Sveiki');
atgriezties (



Noklikšķiniet uz Es</button>
 </div>
 )
}
eksportētnoklusējuma App

Noklikšķinot uz pogas, tiks izsaukts swal funkcija, kas parādīs paziņojumu ar ziņojumu "Sveiki tur".

The swal funkcijai nepieciešami trīs parametri. Pirmais parametrs ir paziņojuma nosaukums, otrais parametrs ir ziņojums, bet trešais ir ikona, kas jāparāda paziņojumā.

Jūs varat iestatīt ikonu parametru uz kādu no iepriekš definētajām vērtībām, t.i., panākumus, brīdinājums, kļūda, vai info. Pēc tam paziņojuma ikona būs balstīta uz jūsu nodotajām vērtībām.

Piemēram:

imports Reaģēt no'reaģēt'
imports swal no'sweetalert'
funkcijuApp() {
konst paziņot = () => swal('Sveiki', "Laipni lūdzam manā lapā", 'panākumi');
atgriezties (



Noklikšķiniet uz Es</button>
 </div>
 )
}
eksportētnoklusējuma App

Kad lietotājs noklikšķina uz pogas, tas izsauc paziņot funkciju. Pēc tam šī funkcija parādīs paziņojumu ar ziņojumu "Sveiki" un "Laipni lūdzam manā lapā" ar veiksmes ikonu.

Alternatīva izmantošanai swal funkcija ar trim parametriem būtu izmantot swal funkcija ar objekta parametru. Šis objekta parametrs satur rekvizītus, kas nosaka paziņojumu komponentu.

Piemēram:

imports Reaģēt no'reaģēt'
imports swal no'sweetalert'
funkcijuApp() {
konst paziņot = () => swal(
 {
 virsraksts: 'Sveiki',
 teksts: "Laipni lūdzam manā lapā",
 ikona: 'panākumi',
 poga: 'LABI',
 }
 );
atgriezties (



Noklikšķiniet uz Es</button>
 </div>
 )
}
eksportētnoklusējuma App

Iepriekš esošajā koda blokā swal funkcija aizņem objektu ar šādām īpašībām: virsraksts, tekstu, ikonu, un pogu.

The virsraksts rekvizīts norāda paziņojuma nosaukumu, savukārt tekstu rekvizīts definē ziņojumu. Ar ikonu rekvizītu, varat norādīt paziņojumā redzamās ikonas veidu.

Visbeidzot, pogu rekvizīts norāda paziņojumā redzamās pogas tekstu. Šajā gadījumā poga parāda tekstu labi.

Pogas rekvizītu pielāgošana

Jūs varat pielāgot pogu paziņojuma komponenta īpašums, lai tas atbilstu jūsu dizaina vajadzībām. The pogu Īpašums aizņem objektu ar rekvizītiem, ko izmanto, lai konfigurētu pogas darbību un izskatu.

Noklusējuma pogai ir šādi rekvizīti:

swal(
 {
 poga: {
 teksts: "LABI",
 vērtība: taisnība,
 redzams: taisnība,
 klases nosaukums: "",
 closeModal: taisnība
 },
 }
 );

Iepriekš esošajā koda blokā ar pogu tiek izmantoti šādi rekvizīti:

• tekstu: teksts, kas jāparāda uz pogas.
• vērtību: vērtība, kas jāatgriež, kad lietotājs noklikšķina uz pogas. Šajā gadījumā vērtība ir taisnība.
• redzams: Būla vērtība norāda, vai pogai jābūt redzamai.
• klasesNosaukums: virkne, kas apzīmē CSS klasi, kas jāpiemēro pogai.
• closeModal: Būla vērtība, kas norāda, vai modāls ir jāaizver, kad tiek noklikšķināts uz pogas.

Varat arī renderēt vairākas pogas, izmantojot masīvu ar pogas īpašums. Masīvs kā elementus izmantos virknes.

Piemēram:

swal(
 {
 pogas: ["Atcelt", "Labi"],
 }
 );

Šajā piemērā jūsu paziņojumu komponentā būs divas pogas ar tekstiem atcelt un Labi. Iestatīšana pogas īpašumu uz viltus parādīs paziņojumu bez pogas.

HTML elementu renderēšana paziņojumu komponentā

Varat arī renderēt HTML elementus, izņemot vienkāršas virknes kā paziņojumu. Tas nodrošina plašu pielāgošanas iespēju klāstu.

Piemēram:

imports Reaģēt no'reaģēt'
imports swal no'sweetalert'
funkcijuApp() {
konst paziņot = () => swal(
 {
 saturs: {
 elements: 'ievade',
 atribūti: {
 vietturis: 'Vārds',
 veids: 'teksts'
 }
 },
 pogas: 'Pierakstīties'
 }
 )
atgriezties (

"lietotne">
Noklikšķiniet uz Es</button>
 </div>
 )
}
eksportētnoklusējuma App

Šajā piemērā jūs izmantojat saturu rekvizītu, lai renderētu ievades lauku ar viettura tekstu.

Jūs norādāt paziņojuma saturu, izmantojot saturu rekvizītu un HTML elementu, ko atveidot ar elements īpašums. Lai norādītu HTML elementa atribūtus, izmantojiet atribūti īpašums.

Iepriekš esošais koda bloks parādīs tālāk redzamo paziņojumu, kad noklikšķināsit uz pogas elementa.

Paziņojumu komponenta stila veidošana

Tā vietā, lai ievērotu noklusējuma paziņojumu lodziņa stilu, ko nodrošina SweetAlert bibliotēka, varat pielāgot paziņojumu lodziņa izskatu, izmantojot savus CSS stilus.

Jūs izmantosiet klasesNosaukums īpašumu, lai paziņojumam pievienotu savus stilus. The klasesNosaukums rekvizīts definē paziņojuma CSS klasi.

Piemēram:

swal(
 {
 virsraksts: 'Sveiki',
 teksts: "Laipni lūdzam manā lapā",
 poga: viltus,
 klases nosaukums: 'trauksme',
 }
 )

Paziņojumam augstāk esošajā koda blokā ir a klasesNosaukums vērtību brīdinājums. Pēc paziņojuma izveides un definēšanas klasesNosaukums, jūs definēsit savus CSS stilus:

.brīdināt{
fona krāsa: zaļš;
fontu ģimene: kursīvs;
robeža-rādiuss: 15px;
}

Iepriekš minētie CSS stili attieksies uz paziņojumu par renderēšanu:

Paziņojumu komponenta aizvēršana

SweetAlert bibliotēkā ir pieejamas vairākas iespējas, kā pielāgot paziņojumu aizvēršanas veidu. Šīs iespējas ir closeOnEsc, closeOnClickOutside, un taimeris īpašības.

The closeOnEsc rekvizīts nosaka, vai paziņojumu lodziņš tiek aizvērts, kad lietotājs nospiež tastatūras taustiņu Esc. The closeOnEsc Īpašumam ir Būla vērtība.

swal(
 {
 ...,
 closeOnEsc: viltus,
 }
 )

Pēc noklusējuma closeOnEsc rekvizīts ir iestatīts uz taisnība. Iepriekš esošajā koda blokā jūs iestatāt closeOnEsc īpašumu uz viltus. Iestatot īpašumu uz viltus, lietotājs nevar aizvērt paziņojumu lodziņu, nospiežot taustiņu Esc.

Varat arī noteikt, vai lietotājs var aizvērt paziņojumu lodziņu, noklikšķinot ārpus lodziņa, izmantojot closeOnClickOutside īpašums.

Ja īpašums ir iestatīts uz taisnība, closeOnClickOutside rekvizīts ļauj aizvērt paziņojumu lodziņu, noklikšķinot jebkurā vietā ārpus tā. Šī ir SweetAlert noklusējuma darbība. Lai apturētu šo darbību, iestatiet closeOnClickOutside īpašumu uz viltus.

swal(
 {
 ...,
 closeOnClickOutside: viltus,
 }
 )

Ar taimeris rekvizītu, varat iestatīt laika ierobežojumu, kurā paziņojumu lodziņš automātiski aizveras. The taimeris rekvizīts iegūst veselu skaitli milisekundēs.

swal(
 {
 ...,
 taimeris: 5000,
 }
 )

Šajā piemērā taimeris rekvizīts ir iestatīts uz 5000. Paziņojums būs redzams tikai 5 sekundes.

Efektīvi pielāgoti paziņojumi, izmantojot SweetAlert

SweetAlert ir jaudīga bibliotēka, kurā varat izveidot pielāgotus paziņojumus React lietojumprogrammā. Izmantojot bibliotēkas swal funkciju, tagad varat izveidot paziņojumus ar pielāgotiem rekvizītiem un darbību. Varat arī izmantot citas bibliotēkas, piemēram, React-Toastify, lai izveidotu pielāgotus brīdinājumus React lietojumprogrammā.