Сообщения об ошибках

Для работы с библиотекой 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>

После этого объект Toastify становится доступен в глобальной области видимости, и можно создавать уведомления напрямую через Toastify({...}).showToast();.

Для проекта с модульной системой (например, через Webpack или Vite) можно установить библиотеку через npm:

npm install toastify-js

И подключить её в коде:

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

Создание простого сообщения об ошибке

Самый базовый способ уведомления об ошибке — создание toast с текстом и красной цветовой схемой для визуального выделения:

Toastify({
  text: "Ошибка при загрузке данных",
  duration: 3000,
  gravity: "top", // "top" или "bottom"
  position: "right", // "left", "center", "right"
  style: {
    background: "linear-gradient(to right, #FF5F6D, #FFC371)",
    color: "#fff",
    fontWeight: "bold",
  }
}).showToast();

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

  • text — текст уведомления.
  • duration — время показа в миллисекундах. 0 означает, что toast не исчезнет автоматически.
  • gravity и position управляют положением на экране.
  • style позволяет полностью контролировать внешний вид, включая цвет фона, текста и шрифты.

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

Toastify предоставляет дополнительные параметры для настройки поведения сообщений:

  • close — отображение кнопки закрытия. Если true, пользователь может закрыть toast вручную.
  • stopOnFocus — при наведении курсора таймер исчезновения останавливается.
  • onClick — функция, которая выполняется при клике на toast.
  • offset — смещение уведомления относительно края экрана.

Пример с дополнительными опциями:

Toastify({
  text: "Не удалось сохранить изменения",
  duration: 5000,
  close: true,
  stopOnFocus: true,
  gravity: "bottom",
  position: "center",
  style: {
    background: "#e74c3c",
    color: "#ffffff",
    borderRadius: "8px",
    boxShadow: "0px 4px 10px rgba(0,0,0,0.2)"
  },
  onClick: function() {
    console.log("Toast закрыт пользователем");
  }
}).showToast();

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

Для сообщений об ошибках часто удобно добавлять иконки или форматированный текст. Toastify позволяет использовать HTML внутри text:

Toastify({
  node: (() => {
    const div = document.createElement("div");
    div.innerHTML = '<span style="margin-right:8px;">&#9888;</span>Сбой соединения';
    return div;
  })(),
  duration: 4000,
  gravity: "top",
  position: "right",
  style: {
    background: "#c0392b",
    color: "#fff"
  }
}).showToast();

Использование node вместо text даёт полный контроль над содержимым toast: можно вставлять изображения, ссылки или сложные блоки HTML.

Создание глобального обработчика ошибок

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

function showError(message) {
  Toastify({
    text: message,
    duration: 5000,
    close: true,
    gravity: "top",
    position: "right",
    style: {
      background: "#e74c3c",
      color: "#fff",
      fontWeight: "bold"
    }
  }).showToast();
}

// Пример использования
try {
  // код, который может выбросить ошибку
  throw new Error("Невозможно загрузить профиль пользователя");
} catch (err) {
  showError(err.message);
}

Такой подход упрощает поддержку и гарантирует единый стиль уведомлений по всему проекту.

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

Toastify по умолчанию использует плавное появление и исчезновение, но можно управлять стилями и анимациями через CSS. Например, для создания shake-эффекта при ошибке:

.toast-shake {
  animation: shake 0.5s;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

И применить класс к toast:

Toastify({
  text: "Ошибка сети",
  duration: 4000,
  className: "toast-shake",
  gravity: "top",
  position: "center",
  style: {
    background: "#e74c3c",
    color: "#fff"
  }
}).showToast();

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

Если на странице появляются несколько сообщений одновременно, важно управлять их расположением. Параметры gravity и position определяют общий угол экрана, а offset позволяет задать отступы:

Toastify({
  text: "Ошибка при сохранении",
  gravity: "bottom",
  position: "right",
  offset: { x: 20, y: 50 },
  duration: 4000,
  style: { background: "#c0392b" }
}).showToast();

Так можно выстроить несколько toast-уведомлений, не перекрывая важный контент страницы.

Оглавление