Izdelava privlačnih obvestil s Toastr v React

Obvestila so bistvena za vsako spletno aplikacijo, saj uporabnikom zagotavljajo pomembne informacije. Namesto da sistem obveščanja gradite iz nič, lahko uporabite zunanje knjižnice. Toastr je ena izmed priljubljenih knjižnic za ustvarjanje obvestil v aplikacijah JavaScript.

Namestitev knjižnice Toastr

Najprej začnite z ustvarjanjem aplikacije React, s katero boste delali. Ti lahko ustvarite aplikacijo React z uporabo Vite.

Ko ustvarite aplikacijo, namestite toastr paket v vašem projektu tako, da v terminalu zaženete naslednji ukaz:

npm install --save toastr

Zdaj ste namestili toastr paket in ga lahko uporablja za prikazovanje obvestil.

Ustvarjanje obvestil z uporabo Toastr

Če želite ustvariti obvestila, boste uporabili toastr funkcijo. The toastr funkcija se uporablja za ustvarjanje in prikaz toast sporočil. Preden ustvarite svoja obvestila, poskrbite, da uvozite svoje toastr sloge obvestil v vaši datoteki CSS.

@import'toastr';

Tukaj je primer, kako ustvarite obvestilo z uporabo toastr funkcija:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome");
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

V tem primeru definirate a obvestiti funkcijo. The Kliknite Jaz gumb pokliče obvestiti funkcijo, ko kliknete nanj. The obvestiti funkcija uporablja toastr.uspeh funkcijo za prikaz obvestila o uspehu.

The toastr.uspeh funkcija sprejme dva argumenta. Prvi argument je obvestilno sporočilo, ki je v tem primeru niz "Lepo te je imeti tukaj". Drugi argument je naslov obvestila, "dobrodošli".

Obvestilo, podobno naslednji sliki, se prikaže, ko kliknete Kliknite Jaz gumb.

Poleg tega toastr.uspeh funkcija, toastr objekt ponuja druge funkcije za ustvarjanje obvestil. Druge funkcije so toastr.error, toastr.opozorilo, in toastr.info. Vsaka funkcija ustvari obvestilo z drugačno barvo ozadja in ikono, tako da lahko zlahka ločite med različnimi vrstami obvestil.

Na primer, ko uporabljate toastr.error funkcijo, bo vaše obvestilo videti takole:

Prilagajanje vaših obvestil

S knjižnico Toastr ne morete prilagoditi svojih obvestil s tradicionalnim CSS, za razliko od pri delu z React-Toastify. Vendar Toastr še vedno ponuja druge možnosti za prilagajanje obvestil. S temi možnostmi lahko prilagodite položaj, videz in funkcionalnost svojih obvestil. Možnosti morate posredovati tretjemu argumentu toastr metoda.

Tukaj je primer:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome", {
 closeButton: true,
 progressBar: true,
 timeOut: 3000,
 positionClass: "toast-top-center",
 showMethod: "fadeIn",
 hideMethod: "fadeOut",
 });
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

Za prilagajanje obvestila ta koda uporablja closeButton, progressBar, odmor, positionClass, showMethod, in hideMethod lastnosti predmeta možnosti. The closeButton lastnost določa, ali bo vaše obvestilo prikazano z gumbom za zapiranje. Sprejema logično vrednost.

Uporabljati progressBar lastnosti, lahko obvestilu dodate vrstico napredka. Nastavitev odmor vam omogoča nadzor, kako dolgo bo prikazano obvestilo. Ta lastnost določa število milisekund, preden bo obvestilo samodejno izginilo.

The positionClass Lastnost določa položaj obvestila na vašem zaslonu. Sprejema osem vnaprej določenih vrednosti. Vrednosti vključujejo:

• toast-zgoraj-desno: prikaže obvestilo v zgornjem desnem kotu zaslona.
• toast-zgoraj-levo: Obvestilo se prikaže v zgornjem levem kotu zaslona.
• toast-top-center: Obvestilo se bo prikazalo v zgornjem središču zaslona.
• toast-spodaj-desno: Obvestilo boste videli v spodnjem desnem kotu zaslona.
• toast-spodaj-levo: Obvestilo se prikaže v spodnjem levem kotu zaslona.
• toast-spodaj-sredina: Obvestilo boste našli na sredini spodnjega dela zaslona.
• toast-top-full-width: Obvestilo se prikaže na vrhu zaslona in zapolni celotno širino zaslona.
• toast-bottom-full-width: Obvestilo zapolni celotno širino zaslona in je prikazano na dnu.

Nazadnje, showMethod in hideMethod lastnosti nadzorujejo animacije za prikaz in skrivanje obvestila. The showMethod lastnost določa animacijo, uporabljeno za prikaz obvestila, medtem ko lastnost hideMethod Lastnost določa animacijo, ki se uporablja za skrivanje obvestila.

Obvestilo, opredeljeno v zgornjem kodnem bloku, se bo prikazalo v zgornjem središču zaslona z vrstico napredka in gumbom za zapiranje. Po treh sekundah bo izginil in za prikaz in izginjanje bo uporabil prehode za zatemnitev in zatemnitev.

Izgledalo bo nekako takole.

Upoštevajte, da lahko vsako obvestilo Toastr prilagodite z enim predmetom možnosti, namesto da jih prilagajate enega za drugim. Če želite to narediti, boste uporabili toastr.options premoženje. Ta objekt lastnosti vsebuje prilagoditvene lastnosti vseh vaših obvestil Toastr.

Na primer:

import React from"react";
import toastr from"toastr";
functionApp() {
 toastr.options = {
 closeButton: true,
 progressBar: true,
 positionClass: "toast-top-right",
 timeOut: 5000,
 showMethod: "fadeIn",
 hideMethod: "fadeOut",
 };
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome");
 };
const displayError = () => {
 toastr.error("You ran into an error", "Sorry");
 };
return (



Click Me</button>
Error</button>
 </div>
 );
}
exportdefault App;

Ta primer prikazuje, kako konfigurirati vsa obvestila tako, da imajo vrstico napredka, gumb za zapiranje, zaslon v zgornjem desnem kotu kotu zaslona, ​​se samodejno zapre po 5 sekundah in uporabite prehode za zatemnitev in zatemnitev, da se prikažejo in izginiti.

Če zaženete aplikacijo in kliknete gumbe, se prikaže vmesnik, ki bi bil videti kot spodnja slika.

Naj bodo vaša obvestila interaktivna

Svoja obvestila lahko naredite bolj privlačna z dodajanjem interaktivnosti, kot je možnost klikanja nanje. Če želite to narediti, uporabite onclick premoženje. The onclick Lastnost je ena od možnosti prilagajanja, ki jih ponuja knjižnica Toastr. Določa funkcijo, ki se zažene, ko kliknete na obvestilo, podobno kot dogodek klika (eden od poslušalcev dogodkov JavaScripta).

Tukaj je primer uporabe onclick lastnina:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome", {
 onclick: () => {
 toastr.clear();
 },
 });
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

V zgornjem bloku kode je objekt možnosti toastr.uspeh funkcija vsebuje onclick premoženje. The onclick lastnina imenuje toastr.clear funkcijo, ki počisti obvestilo z zaslona.

Ustvarite privlačna obvestila z uporabo Toastr

Tukaj ste se naučili, kako uporabljati knjižnico Toastr za izdelavo privlačnih obvestil za vašo aplikacijo React. Namestili ste Toastr, ga nastavili v svoji aplikaciji ter ustvarili in prilagodili svoja obvestila. Toastr je zmogljiva knjižnica, ki vam lahko pomaga ustvariti informativna in vizualno privlačna obvestila. Poleg Toastra lahko preizkusite tudi druge knjižnice, kot so SweetAlert, React-Toastify ali Chakra UI.