Изграждане на ангажиращи известия с Toastr в React

Известията са от съществено значение за всяко уеб приложение, тъй като те предоставят на потребителите важна информация. Вместо да изграждате системата за уведомяване от нулата, можете да използвате външни библиотеки. Toastr е една от популярните библиотеки за създаване на известия в JavaScript приложения.

Инсталиране на библиотеката Toastr

Първо, започнете със създаване на React приложение, с което ще работите. Можеш създайте React приложение с помощта на Vite.

След като създадете приложението, инсталирайте тост пакет във вашия проект, като изпълните следната команда във вашия терминал:

npm install --save toastr

Сега сте инсталирали тост пакет и може да го използва за показване на известия.

Създаване на известия с помощта на Toastr

За да създадете известията, ще използвате тост функция. The тост функцията се използва за създаване и показване на тост съобщения. Преди да създадете вашите известия, уверете се, че импортирате вашите тост стилове за известия във вашия CSS файл.

@import'toastr';

Ето пример за това как създавате известие с помощта на тост функция:

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;

В този пример вие дефинирате a уведомявам функция. The Щракнете върху мен бутон извиква уведомявам функция, когато щракнете върху него. The уведомявам функцията използва тост.успех функция за показване на известие за успех.

The тост.успех функцията приема два аргумента. Първият аргумент е уведомителното съобщение, което в този случай е низът „Хубаво е да си тук“. Вторият аргумент е заглавието на известието, "Добре дошли".

Ще се появи известие, подобно на следното изображение, когато щракнете върху Щракнете върху мен бутон.

В допълнение към тост.успех функция, на тост обект предоставя други функции за създаване на известия. Другите функции са toastr.error, toastr.предупреждение, и toastr.info. Всяка функция създава известие с различен фонов цвят и икона, така че можете лесно да правите разлика между различните видове известия.

Например, когато използвате toastr.error функция, вашето известие ще изглежда така:

Персонализиране на вашите известия

С библиотеката Toastr не можете да персонализирате известията си с помощта на традиционния CSS, за разлика от когато работите с React-Toastify. Въпреки това, Toastr все още предоставя други опции за персонализиране на известия. Можете да използвате тези опции, за да персонализирате позицията, външния вид и функционалността на вашите известия. Трябва да предадете опциите на третия аргумент на тост метод.

Ето един пример:

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;

За да персонализирате известието, този код използва closeButton, прогресбар, таймаут, позицияКлас, showMethod, и hideMethod свойства на обекта с опции. The closeButton свойството определя дали вашето известие ще се покаже с бутон за затваряне. Приема булева стойност.

Използвайки прогресбар свойство, можете да добавите лента за напредък към известието. Настройка на таймаут свойството ви позволява да контролирате колко дълго ще се показва известие. Това свойство указва броя милисекунди, преди известието да изчезне автоматично.

The позицияКлас свойството определя позицията на известието на вашия екран. Приема осем предварително дефинирани стойности. Стойностите включват:

• тост-горе-вдясно: Показва известието в горния десен ъгъл на вашия екран.
• тост-горе-ляво: Известието ще се покаже в горния ляв ъгъл на вашия екран.
• тост-горе-център: Известието ще се появи в горната централна част на екрана ви.
• тост-долу-вдясно: Ще видите известието в долния десен ъгъл на екрана.
• тост-долу-вляво: Известието се поставя в долния ляв ъгъл на вашия екран.
• тост-отдолу-център: Ще намерите известието в долната централна част на екрана.
• toast-top-full-width: Известието се появява в горната част на екрана ви, запълвайки цялата ширина на екрана.
• тост-отдолу-пълна ширина: Известието запълва цялата ширина на вашия екран и се показва в долната част.

На последно място, showMethod и hideMethod свойства контролират анимациите за показване и скриване на известието. The showMethod свойството указва анимацията, използвана за показване на известие, докато hideMethod свойството указва анимацията, използвана за скриване на известие.

Известието, дефинирано в кодовия блок по-горе, ще се появи в горната централна част на екрана ви с лента за напредък и бутон за затваряне. Той ще изчезне след три секунди и ще използва преходи за изчезване и затихване, за да се появи и изчезне.

Ще изглежда нещо подобно.

Имайте предвид, че можете да персонализирате всяко известие на Toastr с един обект с опции, вместо да ги персонализирате един по един. За да направите това, ще използвате тост.опции Имот. Този обект на свойства съдържа свойствата за персонализиране на всички ваши известия за Toastr.

Например:

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;

Този пример показва как да конфигурирате всички известия да имат лента за напредък, бутон за затваряне, дисплей в горния десен ъгъл ъгъла на екрана, затваря се автоматично след 5 секунди и използва преходи за избледняване и затихване, за да се появи и изчезва.

Стартирането на приложението и щракването върху бутоните ще визуализира интерфейс, който ще изглежда като изображението по-долу.

Направете вашите известия интерактивни

Можете да направите известията си по-ангажиращи, като добавите интерактивност, като например възможността да щракнете върху тях. За да направите това, използвате onclick Имот. The onclick свойство е една от опциите за персонализиране, които библиотеката Toastr предоставя. Той определя функция, която се изпълнява, когато щракнете върху известието, подобно на click event (един от слушателите на събития на JavaScript).

Ето пример за това как да използвате onclick Имот:

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;

В кодовия блок по-горе обектът с опции на тост.успех функция съдържа an onclick Имот. The onclick свойство нарича тост.изчистване функция, която изчиства известието от екрана.

Създайте ангажиращи известия с помощта на Toastr

Тук научихте как да използвате библиотеката Toastr, за да създадете ангажиращи известия за вашето приложение React. Инсталирахте Toastr, настроихте го в приложението си и създадохте и персонализирахте своите известия. Toastr е мощна библиотека, която може да ви помогне да създадете информативни и визуално привлекателни известия. Освен Toastr, можете да опитате и други библиотеки като SweetAlert, React-Toastify или Chakra UI.