Императивное создание

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

Базовый вызов Toastify

Основной способ создания уведомления — вызов функции Toastify с объектом конфигурации и последующий запуск метода .showToast():

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

Ключевые моменты:

  • text — текст сообщения
  • duration — время отображения в миллисекундах

Императивность заключается в том, что уведомление появляется строго в момент выполнения этого кода.

Управление временем жизни уведомления

Toastify предоставляет гибкие настройки длительности отображения:

Toastify({
  text: "Уведомление на 5 секунд",
  duration: 5000
}).showToast();

Особенности:

  • duration: -1 делает уведомление постоянным
  • короткие уведомления (1000–2000 мс) подходят для второстепенной информации
  • длинные (5000+ мс) — для важных сообщений

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

Императивное создание позволяет точно контролировать позицию каждого уведомления:

Toastify({
  text: "Уведомление сверху справа",
  gravity: "top",
  position: "right"
}).showToast();

Параметры:

  • gravity: "top" или "bottom"
  • position: "left", "center", "right"

Комбинируя параметры, можно добиться нужного UX:

  • верхний правый угол — стандарт для уведомлений
  • нижний центр — менее навязчивый вариант

Стилизация через inline-настройки

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

Toastify({
  text: "Стилизованное уведомление",
  style: {
    background: "linear-gradient(to right, #00b09b, #96c93d)",
    color: "#fff"
  }
}).showToast();

Особенности:

  • используется объект style, аналогичный CSS
  • поддерживаются любые допустимые CSS-свойства
  • удобно для динамических тем

Добавление пользовательских классов

Для более сложной стилизации применяется className:

Toastify({
  text: "Уведомление с классом",
  className: "custom-toast"
}).showToast();

CSS:

.custom-toast {
  font-size: 16px;
  border-radius: 8px;
}

Преимущества:

  • отделение логики от представления
  • повторное использование стилей
  • упрощение поддержки

Обработка кликов

Императивный подход позволяет напрямую назначать обработчики событий:

Toastify({
  text: "Нажми на меня",
  onClick: function() {
    console.log("Клик по уведомлению");
  }
}).showToast();

Сценарии использования:

  • переход по ссылке
  • открытие модального окна
  • выполнение действия

Добавление ссылок

Toastify поддерживает встроенные ссылки:

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

Дополнительно:

  • newWindow: true — открытие в новой вкладке
Toastify({
  text: "Открыть в новой вкладке",
  destination: "https://example.com",
  newWindow: true
}).showToast();

Закрытие уведомлений вручную

Добавление кнопки закрытия:

Toastify({
  text: "Закрываемое уведомление",
  close: true
}).showToast();

Особенности:

  • появляется кнопка “×”
  • пользователь контролирует время закрытия

Работа с HTML-содержимым

Для более сложного контента можно использовать HTML:

Toastify({
  text: "<b>Жирный текст</b> и <i>курсив</i>",
  escapeMarkup: false
}).showToast();

Важно:

  • escapeMarkup: false разрешает HTML
  • требует осторожности при работе с пользовательскими данными (XSS)

Очередь уведомлений

Императивные вызовы создают очередь уведомлений:

Toastify({ text: "Первое" }).showToast();
Toastify({ text: "Второе" }).showToast();
Toastify({ text: "Третье" }).showToast();

Поведение:

  • уведомления накладываются друг на друга
  • порядок определяется порядком вызова

Управление порядком отображения

Параметр oldestFirst управляет порядком:

Toastify({
  text: "Новое сверху",
  oldestFirst: false
}).showToast();

Значения:

  • true (по умолчанию) — старые сверху
  • false — новые сверху

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

Можно сохранять экземпляр и управлять им:

const toast = Toastify({
  text: "Удаляемое уведомление",
  duration: -1
});

toast.showToast();

// позже
toast.hideToast();

Применение:

  • уведомления, зависящие от состояния (например, загрузка)
  • ручное управление жизненным циклом

Динамическое создание уведомлений

Императивный подход особенно полезен при работе с событиями:

button.addEventListener("click", () => {
  Toastify({
    text: "Кнопка нажата",
    duration: 2000
  }).showToast();
});

Или при обработке API:

fetch("/api/data")
  .then(() => {
    Toastify({
      text: "Данные успешно загружены",
      style: { background: "green" }
    }).showToast();
  })
  .catch(() => {
    Toastify({
      text: "Ошибка загрузки",
      style: { background: "red" }
    }).showToast();
  });

Переиспользуемые функции-обёртки

Для упрощения работы создаются вспомогательные функции:

function showSuccess(message) {
  Toastify({
    text: message,
    duration: 3000,
    style: { background: "green" }
  }).showToast();
}

function showError(message) {
  Toastify({
    text: message,
    duration: 4000,
    style: { background: "red" }
  }).showToast();
}

Преимущества:

  • сокращение дублирования кода
  • единый стиль уведомлений
  • централизованное управление

Использование с асинхронными процессами

Императивный стиль позволяет отслеживать состояние операций:

const loadingToast = Toastify({
  text: "Загрузка...",
  duration: -1
});

loadingToast.showToast();

setTimeout(() => {
  loadingToast.hideToast();

  Toastify({
    text: "Готово",
    style: { background: "blue" }
  }).showToast();
}, 3000);

Такой подход создаёт ощущение интерактивности интерфейса.

Комбинирование параметров

Toastify поддерживает одновременное использование всех настроек:

Toastify({
  text: "Полностью настроенное уведомление",
  duration: 4000,
  gravity: "bottom",
  position: "left",
  close: true,
  className: "info-toast",
  style: {
    background: "#333",
    color: "#fff"
  },
  onClick: () => console.log("Клик")
}).showToast();

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

Оглавление