Создание привлекательных уведомлений с помощью Toastr в React

Уведомления важны для любого веб-приложения, поскольку они предоставляют пользователям важную информацию. Вместо создания системы уведомлений с нуля вы можете использовать внешние библиотеки. Toastr — одна из популярных библиотек для создания уведомлений в приложениях JavaScript.

Установка библиотеки Toastr

Во-первых, начните с создания приложения React, с которым вы будете работать. Ты можешь создать приложение React с помощью Vite.

После создания приложения установите тостр package в свой проект, выполнив в терминале следующую команду:

npm install --save toastr

Теперь вы установили тостр package и может использовать его для отображения уведомлений.

Создание уведомлений с помощью Toastr

Для создания уведомлений вы будете использовать тостр функция. тостр Функция используется для создания и отображения всплывающих сообщений. Перед созданием уведомлений убедитесь, что вы импортировали тостр стили уведомлений в вашем файле 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;

В этом примере вы определяете поставить в известность функция. Нажми на меня кнопка вызывает поставить в известность функция, когда вы нажимаете на нее. поставить в известность функция использует тоастр.успех функция для отображения уведомления об успешном выполнении.

тоастр.успех функция принимает два аргумента. Первый аргумент — это сообщение уведомления, которое в данном случае представляет собой строку «Приятно видеть тебя здесь». Второй аргумент — заголовок уведомления, "Добро пожаловать".

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

В добавок к тоастр.успех функция, тостр объект предоставляет другие функции для создания уведомлений. Остальные функции — это тоастр.ошибка, toastr.warning, и toastr.info. Каждая функция создает уведомление с другим цветом фона и значком, поэтому вы можете легко различать разные типы уведомлений.

Например, при использовании тоастр.ошибка функция, ваше уведомление будет выглядеть так:

Настройка ваших уведомлений

С библиотекой 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;

Чтобы настроить уведомление, этот код использует закрытьКнопка, индикатор, тайм-аут, positionClass, показатьМетод, и скрытьметод свойства объекта опций. закрытьКнопка свойство определяет, будет ли ваше уведомление отображаться с кнопкой закрытия. Он принимает логическое значение.

Используя индикатор можно добавить к уведомлению индикатор выполнения. Настройка тайм-аут Свойство позволяет вам контролировать, как долго будет отображаться уведомление. Это свойство указывает количество миллисекунд, по истечении которого уведомление автоматически исчезнет.

positionClass Свойство определяет положение уведомления на экране. Он принимает восемь предопределенных значений. В число значений входят:

• тост-вверху-справа: Отображает уведомление в правом верхнем углу экрана.
• тост вверху слева: уведомление будет отображаться в верхнем левом углу экрана.
• тост-верх-центр: уведомление появится в верхней центральной части экрана.
• тост внизу справа: вы увидите уведомление в правом нижнем углу экрана.
• тост внизу слева: уведомление помещается в нижний левый угол экрана.
• тост-снизу-центр: Вы найдете уведомление внизу по центру экрана.
• тост-верхняя-полная ширина: уведомление появляется в верхней части экрана на всю ширину экрана.
• тост-нижняя-полная ширина: уведомление заполняет всю ширину экрана и отображается внизу.

Наконец, показатьМетод и скрытьметод свойства управляют анимацией для отображения и скрытия уведомления. показатьМетод свойство указывает анимацию, используемую для отображения уведомления, в то время как скрытьметод Свойство указывает анимацию, используемую для скрытия уведомления.

Уведомление, определенное в блоке кода выше, появится в верхней центральной части экрана с индикатором выполнения и кнопкой закрытия. Он исчезнет через три секунды, и для его появления и исчезновения будут использоваться плавные переходы.

Это будет выглядеть примерно так.

Обратите внимание, что вы можете настроить каждое уведомление Toastr с помощью одного объекта параметров вместо того, чтобы настраивать их по одному. Для этого вы будете использовать toastr.options свойство. Этот объект свойств содержит свойства настройки всех ваших уведомлений 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 секунд и используют переходы постепенного появления и исчезновения для появления и пропадать.

Запуск приложения и нажатие кнопок отобразит интерфейс, который будет выглядеть как на изображении ниже.

Сделайте ваши уведомления интерактивными

Вы можете сделать свои уведомления более привлекательными, добавив интерактивность, например, возможность нажимать на них. Для этого вы используете по щелчку свойство. по щелчку Свойство является одним из параметров настройки, предоставляемых библиотекой Toastr. Он определяет функцию, которая запускается, когда вы нажимаете на уведомление, аналогично событие клика (один из прослушивателей событий JavaScript).

Вот пример того, как использовать по щелчку свойство:

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;

В приведенном выше блоке кода объект параметров тоастр.успех функция содержит по щелчку свойство. по щелчку собственность называет toastr.clear функция, которая убирает уведомление с экрана.

Создавайте привлекательные уведомления с помощью Toastr

Здесь вы узнали, как использовать библиотеку Toastr для создания привлекательных уведомлений для вашего приложения React. Вы установили Toastr, настроили его в своем приложении, создали и настроили свои уведомления. Toastr — это мощная библиотека, которая может помочь вам создавать информативные и визуально привлекательные уведомления. Помимо Toastr, вы также можете попробовать другие библиотеки, такие как SweetAlert, React-Toastify или Chakra UI.