События и хуки

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

Основные события

У каждого тоста есть несколько стандартных событий:

  1. onShow – срабатывает в момент отображения уведомления на экране. Используется для инициализации дополнительных эффектов, логирования или запуска сторонней логики.

    Toastify({
    text: "Пример уведомления",
    duration: 3000,
    onShow: function(){
        console.log("Тост отображён!");
    }
}).showToast();

  2. onClick – вызывается при клике на уведомление. Позволяет реализовать интерактивное поведение, например, открытие ссылки или вызов функции.

    Toastify({
    text: "Нажмите на меня",
    onClick: function(){
        alert("Вы кликнули на уведомление!");
    }
}).showToast();

  3. onClose – срабатывает при закрытии тоста, независимо от того, произошло ли это автоматически или вручную. Используется для очистки ресурсов или завершения каких-либо действий.

    Toastify({
    text: "Закроется через 3 секунды",
    duration: 3000,
    onClose: function(){
        console.log("Тост закрыт");
    }
}).showToast();

Работа с хуками

Хуки в Toastify — это функции, которые дают возможность вмешиваться в процесс жизненного цикла уведомления:

  1. beforeShow – вызывается перед отображением тоста. Можно использовать для проверки условий или динамического изменения контента.

    Toastify({
    text: "Текст может измениться",
    beforeShow: function(){
        this.options.text = "Текст изменён перед показом";
    }
}).showToast();

  2. afterShow – вызывается сразу после того, как тост появился на экране. Часто применяется для запуска анимаций или внешних эффектов.

    Toastify({
    text: "После показа",
    afterShow: function(){
        console.log("Тост появился полностью");
    }
}).showToast();

  3. beforeClose – срабатывает перед закрытием тоста. Позволяет отменить закрытие или выполнить дополнительные проверки.

    Toastify({
    text: "Попытка закрытия",
    beforeClose: function(){
        return confirm("Вы точно хотите закрыть уведомление?");
    }
}).showToast();

Управление событиями через объект options

Все хуки и события передаются через объект options при создании тоста. Важно помнить:

  • onShow, onClick и onClose работают напрямую с жизненным циклом тоста.
  • beforeShow, afterShow и beforeClose дают возможность вмешательства в процесс отображения и закрытия.
  • Хуки могут изменять параметры уведомления до его рендеринга или предотвращать закрытие.

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

Toastify({
    text: "Комплексный пример",
    duration: 5000,
    onShow: function(){ console.log("Тост показан"); },
    onClick: function(){ console.log("Кликнут"); },
    onClose: function(){ console.log("Тост закрыт"); },
    beforeShow: function(){ console.log("Перед показом"); },
    afterShow: function(){ console.log("После показа"); },
    beforeClose: function(){ console.log("Перед закрытием"); return true; }
}).showToast();

Особенности работы с событиями

  • Все функции-хуки вызываются в контексте объекта тоста (this указывает на текущий тост).
  • Если beforeClose возвращает false, закрытие уведомления будет отменено.
  • Хуки можно комбинировать: несколько функций можно использовать одновременно для одного тоста, чтобы разделить логику отображения и закрытия.
  • onClick можно комбинировать с stopOnFocus: true для предотвращения случайного закрытия уведомления при наведении курсора.

Практические советы

  1. Для динамического изменения текста или стиля лучше использовать beforeShow.
  2. Для запуска анимаций или дополнительных визуальных эффектов лучше применять afterShow.
  3. Чтобы логировать действия пользователя, использовать onClick и onClose одновременно.
  4. Для сложной логики закрытия уведомления — beforeClose с возвратом булева значения.

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

Оглавление