Создание обёрток

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script 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({
  text: "Привет, мир!",
  duration: 3000,
  gravity: "top",
  position: "right",
  backgroundColor: "#4CAF50"
}).showToast();

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

  • text — текст уведомления.
  • duration — время отображения в миллисекундах (0 оставляет уведомление до закрытия вручную).
  • gravity — вертикальное положение ("top" или "bottom").
  • position — горизонтальное положение ("left", "center", "right").
  • backgroundColor — цвет фона.

Создание обёртки для уведомлений

Обёртка — это функция, которая инкапсулирует стандартные параметры Toastify и позволяет создавать уведомления с минимальным количеством кода.

Пример базовой обёртки:

function showToast(message, options = {}) {
  Toastify({
    text: message,
    duration: options.duration || 3000,
    gravity: options.gravity || "top",
    position: options.position || "right",
    backgroundColor: options.backgroundColor || "#333",
    close: options.close || false,
    stopOnFocus: options.stopOnFocus !== undefined ? options.stopOnFocus : true,
    onClick: options.onClick || null
  }).showToast();
}

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

showToast("Данные успешно сохранены", { backgroundColor: "#4CAF50", close: true });

Разделение типов уведомлений

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

const toastTypes = {
  success: { backgroundColor: "#4CAF50" },
  error: { backgroundColor: "#F44336" },
  info: { backgroundColor: "#2196F3" },
  warning: { backgroundColor: "#FF9800" }
};

function showTypedToast(message, type = "info", options = {}) {
  const typeConfig = toastTypes[type] || toastTypes.info;
  showToast(message, { ...typeConfig, ...options });
}

Примеры использования:

showTypedToast("Операция выполнена успешно", "success");
showTypedToast("Произошла ошибка при сохранении", "error", { duration: 5000 });

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

  • Единый стиль уведомлений.
  • Возможность глобальной настройки всех типов уведомлений через объект toastTypes.

Расширение функционала через обёртки

Обёртки позволяют добавлять дополнительные возможности, которые Toastify не предоставляет напрямую:

  1. Логирование уведомлений в консоль:
function showToastWithLog(message, options = {}) {
  console.log(`Toast: ${message}`);
  showToast(message, options);
}
  1. Очередь уведомлений:

Создаём массив и функцию, которая показывает уведомления поочередно:

const toastQueue = [];

function enqueueToast(message, options = {}) {
  toastQueue.push({ message, options });
  if (toastQueue.length === 1) processQueue();
}

function processQueue() {
  if (!toastQueue.length) return;
  const { message, options } = toastQueue[0];
  showToast(message, { ...options, onClose: () => {
    toastQueue.shift();
    processQueue();
  }});
}

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

Настройка стилей через обёртку

В обёртках удобно задавать единый стиль для всей системы уведомлений, включая шрифты, тени и бордеры:

function styledToast(message, options = {}) {
  showToast(message, {
    ...options,
    style: {
      fontFamily: "'Roboto', sans-serif",
      fontSize: "14px",
      boxShadow: "0 4px 12px rgba(0,0,0,0.2)",
      borderRadius: "8px"
    }
  });
}

Использование:

styledToast("Стильное уведомление");

Асинхронные уведомления

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

async function showAsyncToast(promise, messages) {
  try {
    const result = await promise;
    showTypedToast(messages.success, "success");
    return result;
  } catch (error) {
    showTypedToast(messages.error, "error");
    throw error;
  }
}

Пример:

showAsyncToast(fetch("/api/data"), {
  success: "Данные загружены",
  error: "Ошибка загрузки данных"
});

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

Обёртка может быть связана с формами для уведомлений об ошибках или успешной отправке:

function handleFormSubmission(formElement) {
  formElement.addEventListener("submit", async (e) => {
    e.preventDefault();
    try {
      await submitForm(formElement);
      showTypedToast("Форма отправлена", "success");
    } catch {
      showTypedToast("Не удалось отправить форму", "error");
    }
  });
}

Вывод

Обёртки над Toastify позволяют:

  • Стандартизировать внешний вид уведомлений.
  • Упростить вызовы уведомлений в разных частях приложения.
  • Добавлять дополнительный функционал (очередь, логирование, асинхронность).
  • Создавать типовые уведомления (success, error, info, warning) с минимальным количеством повторяющегося кода.

Эффективная обёртка превращает библиотеку Toastify в полноценную систему уведомлений для любого проекта на JavaScript.

Оглавление