Типы данных

Для начала работы с Toastify необходимо подключить библиотеку к проекту. Доступны два способа: через CDN и через npm/yarn.

CDN-подключение:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

Через npm:

npm install toastify-js

После установки импорт в Jav * aScript:

import Toastify from 'toastify-js';
import "toastify-js/src/toastify.css";

Создание базового уведомления

Для создания простого уведомления используется функция Toastify() с объектом настроек:

Toastify({
  text: "Привет! Это уведомление.",
  duration: 3000, // время отображения в миллисекундах
}).showToast();

Ключевые параметры:

  • text — текст уведомления.
  • duration — длительность показа в миллисекундах. Значение 0 делает уведомление постоянным.
  • destination — URL, на который перейдёт пользователь при клике.
  • close — добавляет кнопку закрытия, если значение true.

Позиционирование уведомлений

Toastify позволяет гибко управлять местоположением уведомления на странице.

Примеры позиционирования:

Toastify({
  text: "Верхний левый угол",
  duration: 3000,
  gravity: "top", // top или bottom
  position: "left" // left, center, right
}).showToast();

Объяснение параметров:

  • gravity определяет вертикальное расположение: top или bottom.
  • position управляет горизонтальным выравниванием: left, center, right.

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

С помощью свойства style можно задавать индивидуальный дизайн уведомления.

Toastify({
  text: "Кастомный стиль",
  duration: 3000,
  style: {
    background: "linear-gradient(to right, #00b09b, #96c93d)",
    color: "#fff",
    fontSize: "16px",
    borderRadius: "8px"
  }
}).showToast();

Основные стили:

  • background — фон уведомления, поддерживается градиент.
  • color — цвет текста.
  • fontSize — размер шрифта.
  • borderRadius — закругление углов.

Добавление интерактивности

Уведомления можно сделать кликабельными с помощью события onClick:

Toastify({
  text: "Нажми на меня",
  duration: 5000,
  onClick: function() {
    alert("Вы кликнули на уведомление!");
  }
}).showToast();

Также можно использовать ссылку через destination:

Toastify({
  text: "Перейти на сайт",
  duration: 4000,
  destination: "https://example.com"
}).showToast();

Постоянные уведомления и закрытие вручную

Чтобы уведомление оставалось на экране до закрытия пользователем, устанавливается duration: 0 и включается кнопка закрытия:

Toastify({
  text: "Постоянное уведомление",
  duration: 0,
  close: true
}).showToast();

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

Анимация появления и исчезновения

По умолчанию Toastify использует плавное появление и исчезновение. Настроить анимацию можно через CSS или через изменение класса className:

Toastify({
  text: "С кастомной анимацией",
  duration: 3000,
  className: "custom-toast"
}).showToast();

CSS-анимация:

.custom-toast {
  animation: fadeInOut 3s ease-in-out;
}

@keyframes fadeInOut {
  0% {opacity: 0;}
  10% {opacity: 1;}
  90% {opacity: 1;}
  100% {opacity: 0;}
}

Множественные уведомления

Можно одновременно показывать несколько уведомлений. Каждый вызов Toastify().showToast() создаёт отдельное окно. Чтобы они не перекрывали друг друга, следует использовать разные position или задержку вызова через setTimeout:

Toastify({ text: "Первое", duration: 3000 }).showToast();
setTimeout(() => {
  Toastify({ text: "Второе", duration: 3000 }).showToast();
}, 500);

Интеграция с динамическим контентом

Toastify легко адаптируется под динамические данные, например, сообщения из API:

fetch("/api/notifications")
  .then(res => res.json())
  .then(data => {
    data.forEach(msg => {
      Toastify({
        text: msg.text,
        duration: 4000,
        backgroundColor: msg.type === "error" ? "#ff6b6b" : "#4caf50"
      }).showToast();
    });
  });

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

Использование с фреймворками

Toastify интегрируется с любыми современными фронтенд-фреймворками:

  • React: использовать через import и вызывать внутри компонентов.
  • Vue: вызывать в методах компонента или через глобальный миксин.
  • Angular: вызывать внутри сервисов или компонентов после получения событий.

Настройки и параметры остаются идентичными стандартному JavaScript API.

Расширенные возможности

  • stopOnFocus — при наведении курсора уведомление не исчезает.
  • newWindow — открытие ссылки в новом окне, если используется destination.
  • offset — позволяет задать смещение по оси X и Y, например {x: 50, y: 70}.
Toastify({
  text: "Смещение по экрану",
  duration: 3000,
  offset: { x: 50, y: 70 }
}).showToast();
  • callback — функция, которая вызывается после скрытия уведомления:
Toastify({
  text: "Будет скрыто через 3 секунды",
  duration: 3000,
  callback: function() {
    console.log("Уведомление скрыто");
  }
}).showToast();

Практические советы

  1. Разделение уведомлений по типам: использовать разные цвета и иконки для ошибок, предупреждений и успеха.
  2. Минимизация количества уведомлений: слишком много всплывающих окон отвлекает пользователей.
  3. Динамическая генерация: удобно использовать для отображения сообщений после действий пользователя без перезагрузки страницы.
Оглавление