Budování poutavých oznámení s Toastr v React

Oznámení jsou nezbytná pro každou webovou aplikaci, protože uživatelům poskytují důležité informace. Spíše než budovat systém upozornění od začátku, můžete využít externí knihovny. Toastr je jednou z oblíbených knihoven pro vytváření upozornění v aplikacích JavaScript.

Instalace knihovny Toastr

Nejprve začněte vytvořením aplikace React, se kterou budete pracovat. Můžeš vytvořte aplikaci React pomocí Vite.

Po vytvoření aplikace nainstalujte toastr balíček ve vašem projektu spuštěním následujícího příkazu ve vašem terminálu:

npm install --save toastr

Nyní jste nainstalovali toastr balíček a může jej použít k zobrazení upozornění.

Vytváření upozornění pomocí Toastr

Chcete-li vytvořit oznámení, použijte toastr funkce. The toastr funkce se používá k vytváření a zobrazování zpráv o toastu. Před vytvořením oznámení se ujistěte, že je importujete toastr styly oznámení ve vašem souboru CSS.

@import'toastr';

Zde je příklad, jak vytvořit oznámení pomocí toastr funkce:

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 příkladu definujete a oznámit funkce. The Klikni na mě tlačítko volá oznámit funkce, když na něj kliknete. The oznámit funkce používá toastr.úspěch funkce pro zobrazení oznámení o úspěchu.

The toastr.úspěch funkce má dva argumenty. Prvním argumentem je oznamovací zpráva, což je v tomto případě řetězec "Je hezké mít tě tady". Druhým argumentem je název oznámení, "Vítejte".

Po kliknutí na ikonu se zobrazí oznámení podobné následujícímu obrázku Klikni na mě knoflík.

Navíc k toastr.úspěch funkce, toastr objekt poskytuje další funkce pro vytváření upozornění. Další funkce jsou toastr.chyba, toastr.varování, a toastr.info. Každá funkce vytvoří oznámení s jinou barvou pozadí a ikonou, takže můžete snadno rozlišit různé typy oznámení.

Například, když použijete toastr.chyba funkce, vaše oznámení bude vypadat takto:

Přizpůsobení vašich oznámení

S knihovnou Toastr si na rozdíl od tradičních CSS nemůžete přizpůsobit oznámení při práci s React-Toastify. Toastr však stále poskytuje další možnosti přizpůsobení oznámení. Tyto možnosti můžete použít k přizpůsobení pozice, vzhledu a funkčnosti oznámení. Musíte předat možnosti třetímu argumentu toastr metoda.

Zde je pří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;

K přizpůsobení oznámení tento kód používá tlačítko zavřít, ukazatel průběhu, Časový limit, positionClass, showMethod, a hideMetoda vlastnosti objektu options. The tlačítko zavřít vlastnost určuje, zda se vaše oznámení zobrazí s tlačítkem pro zavření. Přijímá booleovskou hodnotu.

Za použití ukazatel průběhu vlastnost, můžete k oznámení přidat ukazatel průběhu. Nastavení Časový limit vlastnost umožňuje ovládat, jak dlouho se bude upozornění zobrazovat. Tato vlastnost určuje počet milisekund, než oznámení automaticky zmizí.

The positionClass vlastnost definuje pozici oznámení na obrazovce. Přijímá osm předem definovaných hodnot. Mezi tyto hodnoty patří:

• toast-vpravo nahoře: Zobrazí upozornění v pravém horním rohu obrazovky.
• toast-vlevo nahoře: Oznámení se zobrazí v levém horním rohu obrazovky.
• toast-top-centr: Oznámení se zobrazí uprostřed horní části obrazovky.
• toast-dole-vpravo: Oznámení se zobrazí v pravém dolním rohu obrazovky.
• toast-dole-vlevo: Oznámení je umístěno v levém dolním rohu obrazovky.
• toast-bottom-center: Oznámení najdete uprostřed dole na obrazovce.
• toast-top-full-width: Oznámení se zobrazí v horní části obrazovky a vyplní celou šířku obrazovky.
• toast-spodní-plná šířka: Oznámení vyplní celou šířku obrazovky a zobrazí se ve spodní části.

Konečně, showMethod a hideMetoda vlastnosti řídí animace pro zobrazení a skrytí oznámení. The showMethod vlastnost určuje animaci použitou k zobrazení oznámení, zatímco hideMetoda vlastnost určuje animaci použitou ke skrytí oznámení.

Oznámení definované v bloku kódu výše se objeví nahoře uprostřed obrazovky s ukazatelem průběhu a tlačítkem pro zavření. Po třech sekundách zmizí a pomocí přechodů zeslabování a zeslabování se objeví a zmizí.

Bude to vypadat nějak takto.

Všimněte si, že každé oznámení Toastr můžete přizpůsobit pomocí jediného objektu možností, místo abyste je přizpůsobovali po jednom. K tomu použijete toastr.možnosti vlastnictví. Tento objekt vlastnosti obsahuje vlastnosti přizpůsobení všech vašich oznámení Toastr.

Napří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 příklad ukazuje, jak nakonfigurovat všechna oznámení tak, aby měla ukazatel průběhu, tlačítko pro zavření a zobrazení v pravém horním rohu rohu obrazovky se po 5 sekundách automaticky zavřou a pomocí přechodů zatmívání a zatmívání se zobrazí zmizet.

Spuštěním aplikace a kliknutím na tlačítka se vykreslí rozhraní, které bude vypadat jako na obrázku níže.

Udělejte svá oznámení interaktivní

Svá oznámení můžete učinit poutavější přidáním interaktivity, jako je možnost na ně kliknout. Chcete-li to provést, použijte při kliknutí vlastnictví. The při kliknutí vlastnost je jednou z možností přizpůsobení, které knihovna Toastr poskytuje. Určuje funkci, která se spustí po kliknutí na oznámení, podobně jako událost kliknutí (jeden z posluchačů událostí JavaScriptu).

Zde je příklad, jak použít při kliknutí vlastnictví:

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;

Ve výše uvedeném bloku kódu jsou možnosti objektu toastr.úspěch funkce obsahuje při kliknutí vlastnictví. The při kliknutí vlastnost volá toastr.clear funkce, která vymaže upozornění z obrazovky.

Vytvořte poutavá oznámení pomocí Toastr

Zde jste se naučili, jak používat knihovnu Toastr k vytváření poutavých oznámení pro vaši aplikaci React. Nainstalovali jste Toastr, nastavili jej ve své aplikaci a vytvořili a přizpůsobili svá oznámení. Toastr je výkonná knihovna, která vám může pomoci vytvářet informativní a vizuálně přitažlivá oznámení. Kromě Toastr můžete vyzkoušet i další knihovny jako SweetAlert, React-Toastify nebo Chakra UI.