Vytváranie pútavých upozornení s Toastr v React

Upozornenia sú nevyhnutné pre každú webovú aplikáciu, pretože používateľom poskytujú dôležité informácie. Namiesto budovania systému upozornení od začiatku môžete využiť externé knižnice. Toastr je jednou z populárnych knižníc na vytváranie upozornení v aplikáciách JavaScript.

Inštalácia knižnice Toastr Library

Najprv začnite vytvorením aplikácie React, s ktorou budete pracovať. Môžeš vytvorte aplikáciu React pomocou Vite.

Po vytvorení aplikácie nainštalujte hriankovač balík vo vašom projekte spustením nasledujúceho príkazu vo vašom termináli:

npm install --save toastr

Teraz ste nainštalovali hriankovač balík a môže ho použiť na zobrazovanie upozornení.

Vytváranie upozornení pomocou Toastr

Na vytvorenie upozornení použijete hriankovač funkciu. The hriankovač funkcia sa používa na vytváranie a zobrazovanie správ o toastoch. Pred vytvorením upozornení sa uistite, že ste importovali svoje hriankovač štýly upozornení vo vašom súbore CSS.

@import'toastr';

Tu je príklad toho, ako vytvoríte upozornenie pomocou hriankovač funkcia:

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 tomto príklade definujete a oznámiť funkciu. The Klikni na mňa tlačidlo volá oznámiť funkciu, keď na ňu kliknete. The oznámiť funkcia využíva toastr.úspech funkcia na zobrazenie oznámenia o úspechu.

The toastr.úspech funkcia má dva argumenty. Prvým argumentom je oznamovacia správa, ktorou je v tomto prípade reťazec "Je pekné, že ťa tu mám". Druhým argumentom je názov oznámenia, "Vitajte".

Po kliknutí na ikonu sa zobrazí upozornenie podobné nasledujúcemu obrázku Klikni na mňa tlačidlo.

Navyše k toastr.úspech funkcia, hriankovač poskytuje ďalšie funkcie na vytváranie upozornení. Ďalšie funkcie sú toastr.error, toastr.upozornenie, a toastr.info. Každá funkcia vytvorí upozornenie s inou farbou pozadia a ikonou, takže môžete jednoducho rozlíšiť rôzne typy upozornení.

Napríklad, keď použijete toastr.error funkcia, vaše oznámenie bude vyzerať takto:

Prispôsobenie upozornení

Na rozdiel od knižnice Toastr si nemôžete prispôsobiť upozornenia pomocou tradičného CSS pri práci s React-Toastify. Toastr však stále poskytuje ďalšie možnosti prispôsobenia upozornení. Tieto možnosti môžete použiť na prispôsobenie polohy, vzhľadu a funkčnosti upozornení. Musíte odovzdať možnosti tretiemu argumentu hriankovač metóda.

Tu je príklad:

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;

Na prispôsobenie upozornenia tento kód používa tlačidlo zavrieť, ukazateľ postupu, čas vypršal, positionClass, showMethod, a hideMetóda vlastnosti objektu options. The tlačidlo zavrieť určuje, či sa vaše upozornenie zobrazí s tlačidlom zavrieť. Prijíma boolovskú hodnotu.

Pomocou ukazateľ postupu vlastnosť, môžete do upozornenia pridať indikátor priebehu. Nastavenie čas vypršal vám umožňuje ovládať, ako dlho sa bude upozornenie zobrazovať. Táto vlastnosť určuje počet milisekúnd, kým upozornenie automaticky zmizne.

The positionClass vlastnosť definuje polohu upozornenia na obrazovke. Akceptuje osem preddefinovaných hodnôt. Hodnoty zahŕňajú:

• toast-vpravo hore: Zobrazí upozornenie v pravom hornom rohu obrazovky.
• toast-vľavo hore: Upozornenie sa zobrazí v ľavom hornom rohu obrazovky.
• toast-top-centre: Upozornenie sa zobrazí v strede hornej časti obrazovky.
• toast-dole-vpravo: Upozornenie sa zobrazí v pravom dolnom rohu obrazovky.
• toast-dole-vľavo: Upozornenie je umiestnené v ľavom dolnom rohu obrazovky.
• toast-bottom-center: Oznámenie nájdete v strede spodnej časti obrazovky.
• toast-top-plna sirka: Upozornenie sa zobrazí v hornej časti obrazovky a vyplní celú šírku obrazovky.
• toast-dole-plna sirka: Upozornenie vyplní celú šírku obrazovky a zobrazí sa v spodnej časti.

Nakoniec, showMethod a hideMetóda vlastnosti ovládajú animácie pre zobrazenie a skrytie upozornenia. The showMethod vlastnosť určuje animáciu použitú na zobrazenie upozornenia, zatiaľ čo hideMetóda vlastnosť určuje animáciu použitú na skrytie upozornenia.

Upozornenie definované v bloku kódu vyššie sa zobrazí v strede hore na vašej obrazovke s indikátorom priebehu a tlačidlom zatvorenia. Po troch sekundách zmizne a na zobrazenie a zmiznutie použite prechody zoslabovania a zoslabovania.

Bude to vyzerať asi takto.

Všimnite si, že každé oznámenie Toastr môžete prispôsobiť pomocou jedného objektu možností namiesto toho, aby ste ich prispôsobovali po jednom. Na tento účel použijete toastr.možnosti nehnuteľnosť. Tento objekt vlastnosti obsahuje vlastnosti prispôsobenia všetkých vašich upozornení Toastr.

Napríklad:

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;

Tento príklad ukazuje, ako nakonfigurovať všetky upozornenia tak, aby mali indikátor priebehu, tlačidlo zatvorenia a zobrazenie v pravom hornom rohu rohu obrazovky, automaticky sa zatvorí po 5 sekundách a pomocou prechodov zoslabovania a zoslabovania sa zobrazí zmiznúť.

Spustenie aplikácie a kliknutie na tlačidlá vykreslí rozhranie, ktoré bude vyzerať ako na obrázku nižšie.

Urobte svoje upozornenia interaktívne

Svoje upozornenia môžete urobiť pútavejšími pridaním interaktivity, ako je napríklad možnosť kliknúť na ne. Ak to chcete urobiť, použite po kliknutí nehnuteľnosť. The po kliknutí vlastnosť je jednou z možností prispôsobenia, ktoré knižnica Toastr poskytuje. Špecifikuje funkciu, ktorá sa spustí po kliknutí na upozornenie, podobne ako click event (jeden z poslucháčov udalostí JavaScriptu).

Tu je príklad, ako použiť po kliknutí nehnuteľnosť:

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;

Vo vyššie uvedenom bloku kódu sú možnosti objektu toastr.úspech funkcia obsahuje po kliknutí nehnuteľnosť. The po kliknutí vlastnosť volá toastr.clear funkcia, ktorá vymaže upozornenie z obrazovky.

Vytvorte pútavé upozornenia pomocou aplikácie Toastr

Tu ste sa naučili, ako používať knižnicu Toastr na vytváranie pútavých upozornení pre vašu aplikáciu React. Nainštalovali ste Toastr, nastavili ho vo svojej aplikácii a vytvorili a prispôsobili si upozornenia. Toastr je výkonná knižnica, ktorá vám môže pomôcť vytvárať informatívne a vizuálne príťažlivé upozornenia. Okrem Toastr môžete vyskúšať aj iné knižnice ako SweetAlert, React-Toastify alebo Chakra UI.