Интеграция с webpack

Для использования iziToast в проекте на Webpack необходимо сначала установить пакет через npm или yarn:

npm install izitoast --save

или

yarn add izitoast

После установки библиотека доступна для импорта в коде JavaScript.

import iziToast from 'izitoast';
import 'izitoast/dist/css/iziToast.min.css';

Важно импортировать CSS отдельно, так как iziToast не включает стили автоматически через JS. Если в проекте настроен style-loader и css-loader, стили будут автоматически применяться.

Основная конфигурация iziToast

iziToast предоставляет глобальную функцию iziToast.show для отображения уведомлений с гибкой настройкой параметров.

iziToast.show({
    title: 'Успех',
    message: 'Данные успешно сохранены',
    position: 'topRight',
    timeout: 5000,
    progressBar: true,
    close: true,
});

Ключевые параметры:

  • title – заголовок уведомления.
  • message – основной текст уведомления.
  • timeout – время отображения в миллисекундах (0 – остаётся до закрытия вручную).
  • position – положение на экране: topRight, topLeft, bottomRight, bottomLeft, topCenter, bottomCenter.
  • progressBar – отображение прогресс-бара.
  • close – показывает кнопку закрытия.

Предустановленные типы уведомлений

iziToast поддерживает встроенные типы уведомлений, которые упрощают стилизацию:

iziToast.success({
    title: 'Успех',
    message: 'Операция выполнена',
});

iziToast.error({
    title: 'Ошибка',
    message: 'Произошла ошибка',
});

iziToast.warning({
    title: 'Внимание',
    message: 'Проверьте введённые данные',
});

iziToast.info({
    title: 'Информация',
    message: 'Это информационное уведомление',
});

Каждый тип автоматически применяет соответствующую цветовую схему и иконку.

Глобальные настройки iziToast

Для Webpack-проектов удобнее определить глобальные настройки один раз и использовать их повторно:

iziToast.settings({
    timeout: 4000,
    position: 'topRight',
    close: true,
    progressBar: true,
    theme: 'light', // 'light' или 'dark'
});

После этого все уведомления будут наследовать эти параметры, и их можно будет переопределять только при необходимости.

Динамическая интеграция с модулями

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

async function notifySuccess() {
    const iziToast = await import('izitoast');
    await import('izitoast/dist/css/iziToast.min.css');

    iziToast.default.success({
        title: 'Успех',
        message: 'Модуль загружен динамически',
    });
}

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

Создание кастомных шаблонов уведомлений

iziToast позволяет полностью кастомизировать внешний вид уведомления:

iziToast.show({
    title: 'Пользовательский шаблон',
    message: 'Можно вставлять HTML и кастомные кнопки',
    timeout: 0,
    close: false,
    position: 'bottomLeft',
    layout: 2,
    balloon: true,
    buttons: [
        ['<button>Закрыть</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
        }],
        ['<button>Подтвердить</button>', function (instance, toast) {
            console.log('Подтверждено');
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
        }]
    ]
});

Особенности кастомных уведомлений:

  • layout – структура уведомления (1–2 колонки, возможность включать кнопки).
  • balloon – придаёт форму “шарика” с закруглёнными краями.
  • buttons – массив кнопок с коллбэками.

Работа с событиями

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

iziToast.show({
    title: 'События',
    message: 'Отслеживание открытия и закрытия',
    onOpening: function () { console.log('Уведомление открывается'); },
    onClosing: function () { console.log('Уведомление закрывается'); },
    onClosed: function () { console.log('Уведомление закрыто'); },
});

Это полезно для логирования действий пользователя или для последовательного отображения нескольких уведомлений.

Использование iziToast в React и Vue с Webpack

В фреймворках iziToast интегрируется аналогично обычному JS:

React:

import iziToast from 'izitoast';
import 'izitoast/dist/css/iziToast.min.css';

function notify() {
    iziToast.info({
        title: 'React',
        message: 'Уведомление из компонента React'
    });
}

Vue:

import iziToast from 'izitoast';
import 'izitoast/dist/css/iziToast.min.css';

export default {
    methods: {
        notify() {
            iziToast.success({
                title: 'Vue',
                message: 'Уведомление из метода компонента'
            });
        }
    }
}

Webpack корректно обрабатывает импорт JS и CSS, позволяя интегрировать iziToast без дополнительных плагинов.

Оптимизация размера бандла

  • Импортировать только необходимые модули или использовать динамический импорт.
  • Избегать глобальных стилей, если достаточно локальной загрузки CSS.
  • Настроить tree shaking, чтобы минимизировать включение ненужного кода в бандл.

Поддержка TypeScript

iziToast предоставляет типы через @types/izitoast, что позволяет безопасно использовать параметры и методы:

npm install --save-dev @types/izitoast
import iziToast from 'izitoast';

iziToast.show({
    title: 'TypeScript',
    message: 'Все параметры строго типизированы',
});

Это предотвращает ошибки при передаче некорректных значений в настройки уведомлений.

Оглавление