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

Для использования iziToast в проекте, сборка которого осуществляется с помощью Vite, необходимо выполнить несколько шагов. Основные способы подключения включают установку через npm или подключение через CDN.

Установка через npm

npm install izitoast

После установки библиотеку можно импортировать в проект:

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

Импорт CSS обязателен, иначе уведомления не будут корректно отображаться.

Использование через CDN

Если подключение через npm нежелательно, можно использовать CDN. Для этого в index.html добавляются следующие строки:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/izitoast/dist/css/iziToast.min.css">
<script src="https://cdn.jsdelivr.net/npm/izitoast/dist/js/iziToast.min.js"></script>

После этого iziToast будет доступен глобально через объект window.iziToast.

Настройка Vite для поддержки iziToast

При стандартной конфигурации Vite импорты CSS из node_modules работают без дополнительной настройки. В случае использования TypeScript рекомендуется добавить типы для модуля:

// src/types/iziToast.d.ts
declare module 'izitoast';

Если проект использует строгую проверку типов, это позволит избежать ошибок компиляции.

Создание уведомлений

iziToast предоставляет простой API для генерации уведомлений. Основной метод:

iziToast.show({
    title: 'Пример уведомления',
    message: 'Это сообщение уведомления',
    position: 'topRight', // topLeft, topCenter, bottomRight, bottomLeft, bottomCenter
    timeout: 5000,
});

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

title – заголовок уведомления.
message – основной текст.
position – расположение на экране.
timeout – время отображения в миллисекундах.
theme – тема уведомления (light или dark).

Примеры предопределённых типов уведомлений:

iziToast.success({
    title: 'Успешно',
    message: 'Данные сохранены',
});

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

iziToast.warning({
    title: 'Внимание',
    message: 'Проверка данных не пройдена',
});

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

Глобальная настройка iziToast

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

iziToast.settings({
    timeout: 4000,
    position: 'topRight',
    progressBar: true,
    close: true,
    transitionIn: 'fadeInDown',
    transitionOut: 'fadeOutUp',
});

Эти настройки будут применяться ко всем уведомлениям, если в вызове iziToast.show() не переопределены локально.

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

iziToast позволяет добавлять произвольный HTML-контент:

iziToast.show({
    title: 'Пользовательское уведомление',
    message: 'С кнопкой действия',
    timeout: 7000,
    buttons: [
        ['<button>Закрыть</button>', function (instance, toast) {
            instance.hide({ toast }, toast, 'fadeOut');
        }]
    ]
});

Можно создавать сложные уведомления с изображениями, ссылками и кастомными стилями через CSS-классы.

Интеграция с компонентами и модулями Vite

В проектах на Vite часто используются фреймворки (React, Vue, Svelte). Для React:

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

function App() {
    const notify = () => {
        iziToast.success({
            title: 'Привет',
            message: 'Уведомление в React',
        });
    };

    return <button onCl ick={notify}>Показать уведомление</button>;
}

export default App;

Для Vue 3:

<script setup>
import iziToast from 'izitoast';
import 'izitoast/dist/css/iziToast.min.css';

const notify = () => {
  iziToast.info({
    title: 'Информация',
    message: 'Уведомление в Vue',
  });
};
</script>

<template>
  <button @click="notify">Показать уведомление</button>
</template>

Особенности работы с Vite

Поддержка HMR – при изменении кода уведомления автоматически обновляются без полной перезагрузки страницы.
Tree-shaking – iziToast полностью поддерживает современные сборки Vite, поэтому неиспользуемый код не попадает в итоговый бандл.
Минификация CSS – при импорте через npm CSS автоматически минифицируется при сборке для продакшн.