Breaking changes

Библиотека Toastify претерпела ряд значительных изменений в последних версиях, которые могут повлиять на существующий код. Раздел «Breaking changes» описывает эти изменения подробно, с акцентом на корректное обновление проектов.

Удаление поддержки устаревших опций

Некоторые опции, которые использовались в предыдущих версиях, были полностью удалены:

  • position: "left" и position: "right" Ранее Toast можно было выравнивать по левому или правому краю. В новых версиях поддерживаются только top и bottom с дополнительными подопциями left, center и right через объект gravity и anchor.

  • stopOnFocus Опция, останавливающая исчезновение тоста при наведении курсора, заменена на новый механизм через pauseOnHover: true/false. Это изменение важно, так как старая опция больше не распознается.

Изменения в API создания уведомлений

Ранее уведомления создавались через:

Toastify({
    text: "Hello World",
    duration: 3000
}).showToast();

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

Toastify.toast({
    message: "Hello World",
    duration: 3000,
    gravity: "top",
    position: "right",
    style: {
        background: "linear-gradient(to right, #00b09b, #96c93d)"
    },
    close: true
});

Ключевые изменения:

  • Метод showToast() заменен на toast()
  • Все параметры объединены в объект с явной структурой
  • text → message
  • Добавлен параметр close, управляющий кнопкой закрытия

Обновления в системе стилей

  • Поддержка старого CSS-класса .toastify была пересмотрена. Для кастомизации теперь рекомендуется использовать объект style при создании уведомления.
  • Устаревшие темы (theme: "dark" и "light") больше не используются. Настройка цветов происходит исключительно через style или CSS-переменные.

Пример новой кастомизации:

Toastify.toast({
    message: "Событие успешно выполнено",
    duration: 4000,
    style: {
        background: "#4caf50",
        color: "#ffffff",
        fontWeight: "bold",
        borderRadius: "8px"
    }
});

Изменения в позиционировании

В старых версиях можно было задавать top-left, bottom-right через строку position. Сейчас позиционирование стало более гибким:

Toastify.toast({
    message: "Тост внизу слева",
    gravity: "bottom",  // top | bottom
    position: "left"    // left | center | right
});
  • gravity определяет вертикальное положение (top или bottom)
  • position определяет горизонтальное выравнивание (left, center, right)
  • Комбинация gravity + position заменяет старую строковую форму

Отказ от глобальных настроек

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

function createToast(options) {
    return Toastify.toast({
        gravity: "top",
        position: "right",
        duration: 3000,
        ...options
    });
}

createToast({ message: "Привет!" });
createToast({ message: "Ошибка!", style: { background: "#f44336" } });

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

Обработка событий

Поддержка колбэков onClick и onClose осталась, но способ их передачи изменился:

Toastify.toast({
    message: "Нажмите для действия",
    duration: 5000,
    close: true,
    onClick: () => console.log("Тост нажат"),
    onClose: () => console.log("Тост закрыт")
});
  • Колбэки должны передаваться через объект опций
  • onClick срабатывает при нажатии на весь элемент уведомления
  • onClose срабатывает при закрытии, независимо от причины

Обновления в управлении длительностью

  • Старые единицы времени (timeout в миллисекундах) остаются, но были уточнены условия завершения анимации
  • Теперь длительность учитывает плавное исчезновение, и фактическое отображение может быть на 50–100 мс дольше указанного значения

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

  1. Заменить устаревшие опции (stopOnFocus, text, position в старом виде).
  2. Перейти на новый метод Toastify.toast().
  3. Использовать объект style для кастомизации внешнего вида.
  4. Применять комбинацию gravity + position вместо старой строковой позиции.
  5. Реализовать глобальные настройки через вспомогательные функции, а не через Toastify.defaults.

Следуя этим принципам, можно избежать конфликтов и полностью использовать возможности новой версии библиотеки.

Оглавление