Интеграция в проекты на чистом JavaScript

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

Через CDN достаточно добавить ссылки в HTML:

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

npm install toastify-js

И подключение в коде Jav * aScript:

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

Это позволяет использовать Toastify в современных сборщиках типа Webpack или Vite.

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

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

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

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

  • text — текст уведомления. Обязательный параметр.
  • duration — длительность отображения в миллисекундах (по умолчанию 3000).
  • close — отображение кнопки закрытия (true/false).
  • gravity — положение по вертикали: "top" или "bottom".
  • position — положение по горизонтали: "left", "center", "right".

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

Toastify позволяет полностью кастомизировать внешний вид. Для этого используется параметр style:

Toastify({
  text: "Стилизация уведомления",
  duration: 4000,
  style: {
    background: "linear-gradient(to right, #00b09b, #96c93d)",
    color: "#fff",
    fontSize: "16px",
    borderRadius: "8px",
    boxShadow: "0 4px 12px rgba(0,0,0,0.2)"
  }
}).showToast();

Можно комбинировать CSS-свойства, включая тени, градиенты и трансформации.

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

Для обработки кликов на уведомлении используется параметр onClick:

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

Такое решение полезно для ссылок на страницы, действий в приложении или закрытия уведомления вручную.

Использование ссылок и HTML-контента

Toastify поддерживает вставку HTML с помощью свойства node. Для более сложного уведомления создаётся элемент DOM:

const customNode = document.createElement("div");
customNode.innerHTML = `Важно: Проверьте данные`;

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

Это даёт возможность включать ссылки, изображения и любые элементы HTML без ограничения на текст.

Группировка уведомлений

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

const messages = ["Событие 1", "Событие 2", "Событие 3"];

messages.forEach((msg, i) => {
  setTimeout(() => {
    Toastify({ text: msg, duration: 3000 }).showToast();
  }, i * 3500);
});

Это позволяет плавно отображать несколько уведомлений с интервалом, предотвращая наложение текста.

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

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

import Toastify from 'toastify-js';

export function showNotification(message, options = {}) {
  Toastify({
    text: message,
    duration: options.duration || 3000,
    gravity: options.gravity || "top",
    position: options.position || "right",
    style: options.style || {}
  }).showToast();
}

Такое решение упрощает повторное использование уведомлений и соблюдает принципы модульного кода.

Управление жизненным циклом уведомлений

Хотя Toastify не предоставляет методов для явного удаления уведомлений после отображения, их можно контролировать через CSS и JavaScript. Для более сложных сценариев:

const toast = Toastify({
  text: "Закрываем через 2 секунды",
  duration: 10000,
  close: true
});

toast.showToast();

setTimeout(() => {
  toast.hideToast(); // скрытие вручную
}, 2000);

Метод hideToast() позволяет управлять видимостью независимо от таймера duration.

Интеграция с событиями приложения

Toastify удобно подключать к различным событиям: формы, кнопки, AJAX-запросы:

document.querySelector("#submitBtn").addEventListener("click", () => {
  Toastify({
    text: "Данные отправлены",
    duration: 3000,
    gravity: "bottom",
    position: "center",
    style: { background: "#007bff" }
  }).showToast();
});

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

Оглавление