Biblioteca SweetAlert facilitează crearea de componente de notificare personalizate în React.

SweetAlert este o bibliotecă populară care vă oferă posibilitatea de a crea componente de notificare personalizate pentru aplicația dvs. React. Puteți utiliza notificări pentru a alerta utilizatorii despre informații importante, erori sau acțiuni reușite din aplicația dvs. Acest lucru se adaugă la o experiență excelentă pentru utilizator.

Instalarea bibliotecii SweetAlert

Pentru a utiliza SweetAlert bibliotecă pentru a crea notificări, trebuie să o instalați folosind orice manager de pachete la alegere.

Îl puteți instala prin intermediul Manager de pachete NPM rulând următoarea comandă în terminalul dvs.:

npm install sweetalert --save

Utilizarea SweetAlert pentru a crea notificări

Crearea de notificări personalizate în aplicația React folosind biblioteca SweetAlert este similară cu folosind biblioteca Toastify. The swal funcția oferită de biblioteca SweetAlert creează o instanță a componentei de notificare și definește proprietățile notificării.

instagram viewer

Iată un exemplu de utilizare a swal() funcția de a crea o componentă de notificare:

import Reacţiona din'reacţiona'
import swal din"alerta dulce"
funcţieApp() {


const notifica = () => înghiți'Salutare');


întoarcere (






exportMod implicit App

Făcând clic pe butonul, se va apela swal funcția, care va afișa o notificare cu mesajul „Hello There”.

The swal funcția ia trei parametri. Primul parametru este titlul notificării, al doilea parametru este mesajul, iar al treilea este pictograma de afișat în notificare.

Puteți seta pictograma parametru la una dintre valorile predefinite, adică succes, avertizare, eroare, sau info. Pictograma de notificare se va baza apoi pe valorile pe care le-ați transmis.

De exemplu:

import Reacţiona din'reacţiona'
import swal din"alerta dulce"
funcţieApp() {


const notifica = () => înghiți'Salutare', 'Bine ati venit pe pagina mea', 'succes');


întoarcere (






exportMod implicit App

Când utilizatorul face clic pe butonul, apelează notifica funcţie. Această funcție va afișa apoi o notificare cu mesajul „Bună ziua” și „Bine ați venit pe pagina mea” cu o pictogramă de succes.

O alternativă la utilizarea swal funcția cu cei trei parametri ar fi folosirea swal funcția cu parametrul obiect. Acest parametru de obiect conține proprietăți care definesc componenta de notificare.

De exemplu:

import Reacţiona din'reacţiona'
import swal din"alerta dulce"
funcţieApp() {


const notifica = () => înghiți
 {
 titlu: 'Salutare',
 text: 'Bine ati venit pe pagina mea',
 pictograma: 'succes',
 buton: 'BINE',
 }
 );


întoarcere (






exportMod implicit App

În blocul de cod de mai sus, swal funcția preia un obiect cu următoarele proprietăți: titlu, text, pictograma, și buton.

The titlu proprietate specifică titlul notificării, în timp ce text proprietatea definește mesajul. Cu pictograma proprietate, puteți specifica tipul de pictogramă afișată în notificare.

În cele din urmă, buton proprietate specifică textul butonului afișat în notificare. În acest caz, butonul afișează textul Bine.

Personalizarea proprietății butonului

Puteți personaliza buton proprietatea componentei dvs. de notificare pentru a se potrivi nevoilor dvs. de proiectare. The buton proprietatea preia un obiect cu proprietăți utilizate pentru a configura comportamentul și aspectul butonului.

Un buton implicit conține următoarele proprietăți:

înghiți
 {
 butonul: {
 text: "BINE",
 valoare: Adevărat,
 vizibil: Adevărat,
 numele clasei: "",
 closeModal: Adevărat
 },
 }
 );

În blocul de cod de mai sus, următoarele proprietăți sunt utilizate cu butonul:

  • text: Textul de afișat pe buton.
  • valoare: Valoarea de returnat atunci când utilizatorul face clic pe buton. În acest caz, valoarea este Adevărat.
  • vizibil: O valoare booleană indică dacă butonul ar trebui să fie vizibil.
  • numele clasei: Un șir care reprezintă clasa CSS de aplicat butonului.
  • closeModal: O valoare booleană care indică dacă modalul trebuie închis atunci când se face clic pe butonul.

De asemenea, puteți randa mai mult de un buton folosind o matrice cu butoane proprietate. Matricea va lua șiruri de caractere ca elemente.

De exemplu:

înghiți
 {
 butoane: ["Anulare", "Bine"],
 }
 );

În acest exemplu, componenta de notificare va conține două butoane cu textul Anulare și Bine. Setarea butoane proprietate la fals va reda o notificare fără buton.

Redarea elementelor HTML în interiorul componentei de notificare

De asemenea, puteți reda elemente HTML în afară de șirurile simple ca notificare. Aceasta oferă o gamă largă de opțiuni de personalizare.

De exemplu:

import Reacţiona din'reacţiona'
import swal din"alerta dulce"
funcţieApp() {


const notifica = () => înghiți
 {
 continut: {
 element: 'intrare',
 atribute: {
 substituent: 'Nume',
 tip: 'text'
 }
 },
 butoane: 'Inscrie-te'
 }
 )


întoarcere (


„aplicație”>


exportMod implicit App

În acest exemplu, utilizați conţinut proprietate pentru a reda un câmp de intrare cu text substituent.

Specificați conținutul notificării folosind conţinut proprietatea și elementul HTML de randat cu element proprietate. Pentru a specifica atributele elementului HTML, utilizați atribute proprietate.

Blocul de cod de mai sus va afișa notificarea de mai jos când faceți clic pe elementul butonului.

Stilizarea componentei de notificare

În loc să respectați stilul implicit al casetei de notificare furnizat de biblioteca SweetAlert, puteți personaliza aspectul casetei de notificare prin aplicarea propriilor stiluri CSS.

Veți folosi numele clasei proprietate pentru a adăuga stilurile dvs. la notificare. The numele clasei proprietatea definește o clasă CSS pentru notificare.

De exemplu:

înghiți
 {
 titlu: 'Salutare',
 text: 'Bine ati venit pe pagina mea',
 buton: fals,
 numele clasei: 'alerta',
 }
 )

Notificarea din blocul de cod de mai sus are un numele clasei valoare alerta. După crearea notificării și definirea numele clasei, veți defini stilurile dvs. CSS:

.alerta{
culoare de fundal: verde;
familie de fonturi: cursiv;
hotar-raza: 15px;
}

Stilurile CSS de mai sus se vor aplica notificării la randare:

Închiderea componentei de notificare

Biblioteca SweetAlert oferă mai multe opțiuni pentru a personaliza modul în care sunt închise notificările. Aceste opțiuni sunt closeOnEsc, closeOnClickOutside, și temporizator proprietăți.

The closeOnEsc proprietatea determină dacă caseta de notificare se închide atunci când utilizatorul apasă tasta Esc de pe tastatură. The closeOnEsc proprietatea ia o valoare booleană.

înghiți
 {
 ...,
 closeOnEsc: fals,
 }
 )

În mod implicit, closeOnEsc proprietatea este setată la Adevărat. În blocul de cod de mai sus, setați closeOnEsc proprietate la fals. Setând proprietatea la fals, utilizatorul nu poate închide caseta de notificare apăsând tasta Esc.

De asemenea, puteți determina dacă utilizatorul poate închide caseta de notificare făcând clic în afara casetei folosind closeOnClickOutside proprietate.

Dacă proprietatea este setată la Adevărat, cel closeOnClickOutside proprietatea permite închiderea casetei de notificare făcând clic oriunde în afara acesteia. Acesta este comportamentul implicit al SweetAlert. Pentru a opri acest comportament, setați closeOnClickOutside proprietate la fals.

înghiți
 {
 ...,
 closeOnClickOutside: fals,
 }
 )

Cu temporizator proprietate, puteți seta o limită de timp pentru ca caseta de notificare să se închidă automat. The temporizator proprietatea ia o valoare întreagă în milisecunde.

înghiți
 {
 ...,
 temporizator: 5000,
 }
 )

În acest exemplu, temporizator proprietatea este setată la 5000. Notificarea va fi vizibilă doar timp de 5 secunde.

Notificări personalizate eficiente folosind SweetAlert

SweetAlert este o bibliotecă puternică prin care puteți crea notificări personalizate într-o aplicație React. Folosind bibliotecii swal funcția, acum puteți crea notificări cu proprietăți și comportament personalizate. De asemenea, puteți utiliza alte biblioteci precum React-Toastify pentru a crea alerte personalizate într-o aplicație React.