Миграция с других библиотек

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

1. Сравнение API

Большинство популярных библиотек уведомлений используют функции вроде notify() или show(). В Toastify используется единый метод:

Toastify({
    text: "Сообщение",
    duration: 3000,
    gravity: "top",
    position: "right",
    backgroundColor: "#4CAF50"
}).showToast();

Ключевые отличия:

  • Объект конфигурации вместо нескольких методов. В старых библиотеках часто использовались отдельные методы для разных типов уведомлений (success(), error()), тогда как в Toastify это настраивается через объект.
  • Автоудаление уведомлений. duration задаёт время жизни уведомления. Если требуется постоянное уведомление, duration: -1.
  • Позиционирование через свойства gravity и position. В других библиотеках часто использовались строки вроде "top-right", "bottom-left"; Toastify разделяет на вертикальную (gravity) и горизонтальную (position) оси.

2. Настройка внешнего вида

В старых библиотеках часто были готовые темы для success, info, warning, error. В Toastify кастомизация более гибкая:

Toastify({
    text: "Ошибка загрузки",
    duration: 5000,
    gravity: "bottom",
    position: "center",
    style: {
        background: "linear-gradient(to right, #ff5f6d, #ffc371)",
        color: "#fff",
        fontWeight: "bold",
        borderRadius: "8px",
    }
}).showToast();

Особенности:

  • style позволяет полностью контролировать CSS уведомления.
  • className позволяет подключать собственные классы CSS, что облегчает миграцию с библиотек, где темы задавались через классы.
  • stopOnFocus позволяет замораживать таймер удаления при наведении мыши.

3. Замена уведомлений разных типов

Примеры миграции с common API:

Старый вызов Toastify эквивалент
toastr.success("Готово") Toastify({text: "Готово", backgroundColor: "#4CAF50"}).showToast();
toastr.error("Ошибка") Toastify({text: "Ошибка", backgroundColor: "#F44336"}).showToast();
noty({type:"warning", text:"Внимание"}) Toastify({text: "Внимание", backgroundColor: "#FFC107"}).showToast();

Преимущества: единая функция замещает разные методы, сокращается зависимость от типа уведомления, гибкость через стиль и позиционирование.

4. Поддержка событий

Toastify предоставляет ограниченные события, но достаточно для большинства сценариев:

  • onClick – действие при клике по уведомлению.
  • callback – функция, вызываемая при завершении показа уведомления (срабатывает после duration).

Пример миграции обработчиков:

// Старый код:
toastr.info("Сообщение", "Заголовок", {
    onclick: function() { console.log("Клик!"); }
});

// Toastify:
Toastify({
    text: "Сообщение",
    duration: 4000,
    onClick: function() { console.log("Клик!"); }
}).showToast();

5. Управление несколькими уведомлениями

В старых библиотеках уведомления часто автоматически накладывались одно на другое. В Toastify:

  • Уведомления появляются одно за другим в указанной позиции.
  • Управление через new Toastify(...).showToast() создаёт новый экземпляр.
  • Можно ограничить количество видимых уведомлений через собственный код, например, хранить массив активных уведомлений и удалять старые при превышении лимита.
const activeToasts = [];
function showCustomToast(msg) {
    if (activeToasts.length >= 3) {
        activeToasts.shift().hideToast();
    }
    const toast = Toastify({text: msg, duration: 3000});
    activeToasts.push(toast);
    toast.showToast();
}

6. Особенности миграции

  1. Удаление лишних зависимостей. Toastify не требует jQuery или других библиотек.
  2. Изменение структуры конфигурации. Объединение типа, текста и позиции в один объект.
  3. Упрощение кастомных стилей. Ранее темы могли требовать сложной CSS-структуры; Toastify достаточно style или className.
  4. Учет событий. Обработчики событий объединены в onClick и callback, что упрощает логику.

7. Пример полной миграции проекта

Старый код на toastr:

toastr.success("Данные сохранены!");
toastr.error("Ошибка сервера");
toastr.warning("Проверьте поля");
toastr.info("Загрузка данных...");

Мигрированный код на Toastify:

Toastify({text: "Данные сохранены!", backgroundColor: "#4CAF50"}).showToast();
Toastify({text: "Ошибка сервера", backgroundColor: "#F44336"}).showToast();
Toastify({text: "Проверьте поля", backgroundColor: "#FFC107"}).showToast();
Toastify({text: "Загрузка данных...", backgroundColor: "#2196F3", duration: -1}).showToast();

Преимущество: меньше кода, полный контроль над стилем и временем жизни уведомлений.

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

Оглавление