Хуки для iziToast

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

Основные хуки

iziToast предоставляет следующие ключевые хуки:

  1. onOpening Срабатывает в момент начала открытия уведомления.

    iziToast.show({
    title: 'Информация',
    message: 'Уведомление начинает открываться',
    onOpening: function(instance, toast){
        console.log('Toast открывается', toast);
    }
});
    • instance — объект текущего экземпляра iziToast.
    • toast — DOM-элемент уведомления.

  2. onOpened Срабатывает после полной анимации открытия уведомления.

    iziToast.show({
    title: 'Готово',
    message: 'Уведомление полностью открылось',
    onOpened: function(instance, toast){
        console.log('Toast открыт', toast);
    }
});

  3. onClosing Активируется в момент начала закрытия уведомления, до удаления из DOM.

    iziToast.show({
    title: 'Закрытие',
    message: 'Уведомление скоро закроется',
    onClosing: function(instance, toast, closedBy){
        console.log('Toast закрывается. Причина:', closedBy);
    }
});
    • closedBy — строка, указывающая, что инициировало закрытие: 'timeout', 'button', 'click' или 'manual'.

  4. onClosed Срабатывает после того, как уведомление полностью удалено из DOM.

    iziToast.show({
    title: 'Удалено',
    message: 'Уведомление полностью закрыто',
    onClosed: function(instance, toast, closedBy){
        console.log('Toast удален', closedBy);
    }
});

Передача данных через хуки

Хуки принимают instance и toast, что позволяет изменять уведомление на лету:

iziToast.show({
    title: 'Динамика',
    message: 'Меняем содержимое при открытии',
    onOpening: function(instance, toast){
        toast.querySelector('.iziToast-message').innerText = 'Обновлённое сообщение';
    }
});

Это удобно для создания уведомлений с динамическими данными, загружаемыми с сервера или формируемыми на основе состояния приложения.

Комбинация хуков

Несколько хуков можно использовать одновременно для одного уведомления:

iziToast.show({
    title: 'События',
    message: 'Используем несколько хуков',
    onOpening: function(i, t){ console.log('Начало открытия'); },
    onOpened: function(i, t){ console.log('Открыто'); },
    onClosing: function(i, t, by){ console.log('Начало закрытия', by); },
    onClosed: function(i, t, by){ console.log('Закрыто', by); }
});

Это создаёт полный контроль над жизненным циклом уведомления, позволяя выполнять логику на каждом этапе.

Хуки и асинхронные операции

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

iziToast.show({
    title: 'Асинхронно',
    message: 'Ждём данные перед открытием',
    onOpening: async function(instance, toast){
        const data = await fetch('/api/info').then(res => res.json());
        toast.querySelector('.iziToast-message').innerText = data.message;
    }
});

Использование async/await обеспечивает корректную работу с сетевыми запросами или любыми длительными операциями без блокировки интерфейса.

Практические примеры применения

  • Отслеживание закрытия уведомлений для аналитики:

    iziToast.show({
    title: 'Аналитика',
    message: 'Событие отправлено при закрытии',
    onClosed: function(instance, toast, closedBy){
        sendAnalytics({ event: 'toast_closed', reason: closedBy });
    }
});

  • Изменение внешнего вида уведомления в момент открытия:

    iziToast.show({
    title: 'Стили',
    message: 'Меняем цвет текста при открытии',
    onOpening: function(instance, toast){
        toast.style.backgroundColor = '#ffcc00';
        toast.querySelector('.iziToast-title').style.color = '#000';
    }
});

  • Отложенное закрытие уведомления:

    iziToast.show({
    title: 'Отложено',
    message: 'Закрытие через 5 секунд',
    onOpened: function(instance, toast){
        setTimeout(() => instance.hide({ target: toast, transitionOut: 'fadeOut' }), 5000);
    }
});

Хуки в iziToast обеспечивают гибкость и позволяют интегрировать уведомления с любыми бизнес-процессами приложения, от аналитики до динамического обновления содержимого. Контроль над жизненным циклом уведомлений через хуки открывает возможности для сложных интерфейсных решений и продвинутой кастомизации.

Оглавление