Izrada privlačnih obavijesti s Toastrom u Reactu

Obavijesti su ključne za svaku web aplikaciju jer korisnicima pružaju važne informacije. Umjesto izgradnje sustava obavijesti od nule, možete koristiti vanjske biblioteke. Toastr je jedna od popularnih biblioteka za stvaranje obavijesti u JavaScript aplikacijama.

Instaliranje knjižnice Toastr

Prvo počnite s izradom React aplikacije s kojom ćete raditi. Možeš izraditi React aplikaciju koristeći Vite.

Nakon izrade aplikacije instalirajte tost paket u vašem projektu pokretanjem sljedeće naredbe na vašem terminalu:

npm install --save toastr

Sada ste instalirali tost paket i može ga koristiti za prikaz obavijesti.

Stvaranje obavijesti pomoću Toastr

Za izradu obavijesti upotrijebit ćete tost funkcija. The tost funkcija se koristi za stvaranje i prikaz tost poruka. Prije stvaranja obavijesti, uvezite svoje tost stilove obavijesti u vašoj CSS datoteci.

@import'toastr';

Evo primjera kako stvoriti obavijest pomoću tost 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;

U ovom primjeru definirate a obavijestiti funkcija. The Kliknite Ja gumb poziva obavijestiti funkcija kada kliknete na njega. The obavijestiti funkcija koristi tost.uspjeh funkcija za prikaz obavijesti o uspješnosti.

The tost.uspjeh funkcija prima dva argumenta. Prvi argument je poruka obavijesti koja je u ovom slučaju niz "Lijepo je što ste ovdje". Drugi argument je naslov obavijesti, "Dobrodošli".

Obavijest slična sljedećoj slici pojavit će se kada kliknete na Kliknite Ja dugme.

Uz to tost.uspjeh funkcija, tost objekt pruža druge funkcije za stvaranje obavijesti. Ostale funkcije su toastr.greška, tost.upozorenje, i toastr.info. Svaka funkcija stvara obavijest s drugom bojom pozadine i ikonom, tako da možete lako razlikovati različite vrste obavijesti.

Na primjer, kada koristite toastr.greška vaša će obavijest izgledati ovako:

Prilagodba Vaših obavijesti

S bibliotekom Toastr ne možete prilagoditi svoje obavijesti koristeći tradicionalni CSS, za razliku od kada radite s React-Toastifyjem. Međutim, Toastr još uvijek nudi druge opcije za prilagodbu obavijesti. Pomoću ovih opcija možete prilagoditi položaj, izgled i funkcionalnost svojih obavijesti. Morate proslijediti opcije trećem argumentu tost metoda.

Evo primjera:

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 prilagodbu obavijesti ovaj kôd koristi closeButton, traka za napredak, pauza, pozicijaClass, showMethod, i hideMethod svojstva objekta opcija. The closeButton svojstvo određuje hoće li se vaša obavijest prikazati s gumbom za zatvaranje. Prihvaća Booleovu vrijednost.

Koristiti traka za napredak svojstvu, možete dodati traku napretka obavijesti. Postavljanje pauza svojstvo vam omogućuje kontrolu koliko dugo će se obavijest prikazivati. Ovo svojstvo određuje broj milisekundi prije nego što će obavijest automatski nestati.

The pozicijaClass svojstvo definira položaj obavijesti na vašem zaslonu. Prihvaća osam unaprijed definiranih vrijednosti. Vrijednosti uključuju:

• tost-gore-desno: Prikazuje obavijest u gornjem desnom kutu vašeg zaslona.
• tost-gore-lijevo: Obavijest će se prikazati u gornjem lijevom kutu vašeg zaslona.
• tost-top-center: Obavijest će se pojaviti u gornjem središnjem dijelu vašeg zaslona.
• tost-dolje-desno: Vidjet ćete obavijest u donjem desnom kutu zaslona.
• tost-dolje-lijevo: Obavijest se nalazi u donjem lijevom kutu vašeg zaslona.
• tost-dolje-sredina: Obavijest ćete pronaći u donjem središnjem dijelu zaslona.
• tost-vrh-pune širine: Obavijest se pojavljuje na vrhu vašeg zaslona, ​​ispunjavajući cijelu širinu zaslona.
• tost-dno-pune širine: Obavijest ispunjava cijelu širinu vašeg zaslona i prikazuje se pri dnu.

Na kraju, showMethod i hideMethod svojstva kontroliraju animacije za prikaz i skrivanje obavijesti. The showMethod svojstvo određuje animaciju koja se koristi za prikaz obavijesti, dok svojstvo hideMethod Svojstvo određuje animaciju koja se koristi za skrivanje obavijesti.

Obavijest definirana u gornjem bloku koda pojavit će se u gornjem središnjem dijelu vašeg zaslona, ​​s trakom napretka i gumbom za zatvaranje. Nestat će nakon tri sekunde, a za pojavljivanje i nestajanje koristit će se prijelazi za pojavljivanje i smanjivanje.

Izgledat će otprilike ovako.

Imajte na umu da svaku obavijest Toastra možete prilagoditi s jednim objektom opcija umjesto da ih prilagođavate jednu po jednu. Da biste to učinili, upotrijebit ćete toster.opcije vlasništvo. Ovaj objekt svojstva sadrži svojstva prilagodbe svih vaših Toastr obavijesti.

Na primjer:

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;

Ovaj primjer pokazuje kako konfigurirati sve obavijesti da imaju traku napretka, gumb za zatvaranje, prikaz u gornjem desnom kutu kutu zaslona, ​​automatski se zatvaraju nakon 5 sekundi i koriste prijelaze za izbljeđivanje i zatamnjenje da se pojave i nestati.

Pokretanje aplikacije i klikanje na gumbe prikazat će sučelje koje bi izgledalo kao na slici ispod.

Učinite svoje obavijesti interaktivnima

Svoje obavijesti možete učiniti privlačnijim dodavanjem interaktivnosti, kao što je mogućnost klikanja na njih. Da biste to učinili, koristite na klik vlasništvo. The na klik svojstvo je jedna od opcija prilagodbe koju nudi knjižnica Toastr. Određuje funkciju koja se pokreće kada kliknete na obavijest, slično kao click event (jedan od JavaScriptovih slušatelja događaja).

Evo primjera kako koristiti na klik svojstvo:

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;

U gornjem bloku koda, objekt opcija za tost.uspjeh funkcija sadrži na klik vlasništvo. The na klik vlasništvo naziva tost.jasno funkcija koja briše obavijest sa zaslona.

Stvorite zanimljive obavijesti pomoću Toastr

Ovdje ste naučili kako koristiti biblioteku Toastr za izradu privlačnih obavijesti za svoju React aplikaciju. Instalirali ste Toastr, postavili ga u svojoj aplikaciji te izradili i prilagodili svoje obavijesti. Toastr je moćna biblioteka koja vam može pomoći u stvaranju informativnih i vizualno privlačnih obavijesti. Osim Toastra, možete isprobati i druge biblioteke poput SweetAlert, React-Toastify ili Chakra UI.