Общие паттерны интеграции

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

Через npm или yarn:

npm install toastify-js
# или
yarn add toastify-js

После установки библиотеку можно импортировать в JavaScript-код:

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

Через CDN:

Использование CDN удобно для небольших проектов, где не требуется сборка через Webpack или Vite.

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

Основной элемент Toastify — это объект уведомления, который создаётся с помощью функции Toastify({ ...options }).

Пример минимального уведомления:

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

Настройка позиции и стилей

Позиция уведомления на экране задается с помощью параметров gravity и position.

Toastify({
  text: "Уведомление внизу справа",
  duration: 4000,
  gravity: "bottom", // top или bottom
  position: "right", // left, center, right
}).showToast();

Можно добавить индивидуальные стили через параметр style:

Toastify({
  text: "Красное уведомление",
  duration: 4000,
  style: {
    background: "linear-gradient(to right, #ff5f6d, #ffc371)",
    color: "#fff",
    fontWeight: "bold",
    borderRadius: "8px",
    boxShadow: "0 4px 12px rgba(0,0,0,0.3)"
  }
}).showToast();

Добавление действия на клик

Toastify поддерживает выполнение функции при клике на уведомление через параметр onClick.

Toastify({
  text: "Нажми меня",
  duration: 5000,
  onClick: function() {
    console.log("Уведомление было кликнуто");
  }
}).showToast();

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

Автозакрытие и управление временем отображения

Параметр duration задает автоматическое закрытие уведомления. Для уведомлений без автозакрытия используется значение -1.

Toastify({
  text: "Закрывается вручную",
  duration: -1,
  close: true
}).showToast();
  • close: true — отображает кнопку закрытия
  • duration: -1 — отключает автоматическое закрытие

Поддержка HTML и кастомного контента

Toastify позволяет вставлять HTML-контент в уведомление через node. Это полезно, когда требуется более сложная структура:

const node = document.createElement("div");
node.innerHTML = `Важно! Уведомление с HTML`;

Toastify({
  node: node,
  duration: 5000,
  gravity: "top",
  position: "center"
}).showToast();

Использование глобальных конфигураций

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

function createToast(message, type = "info") {
  let bgColor;
  switch(type) {
    case "success": bgColor = "green"; break;
    case "error": bgColor = "red"; break;
    case "warning": bgColor = "orange"; break;
    default: bgColor = "#333";
  }

  Toastify({
    text: message,
    duration: 4000,
    gravity: "top",
    position: "right",
    style: { background: bgColor, color: "#fff" }
  }).showToast();
}

createToast("Данные успешно сохранены", "success");
createToast("Ошибка при загрузке файла", "error");

Такой подход повышает читаемость кода и позволяет стандартизировать оформление уведомлений.

Интеграция с формами и событиями

Часто уведомления используются для обратной связи при взаимодействии пользователя с формами:

document.querySelector("#submitBtn").addEventListener("click", function() {
  const input = document.querySelector("#email").value;
  if (!input.includes("@")) {
    Toastify({
      text: "Введите корректный email",
      duration: 3000,
      gravity: "top",
      position: "center",
      style: { background: "#e74c3c", color: "#fff" }
    }).showToast();
  } else {
    Toastify({
      text: "Форма отправлена",
      duration: 3000,
      gravity: "top",
      position: "center",
      style: { background: "#2ecc71", color: "#fff" }
    }).showToast();
  }
});

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

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

Для создания визуально приятного эффекта можно использовать CSS-анимации или подключить библиотеку с кастомными классами. Toastify позволяет передавать CSS-классы через параметр className:

Toastify({
  text: "Анимированное уведомление",
  duration: 4000,
  gravity: "top",
  position: "right",
  className: "fade-in-toast"
}).showToast();

CSS пример:

.fade-in-toast {
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

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

Оглавление