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

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

npm install izitoast

или

yarn add izitoast

После установки подключение производится через импорт стилей и скрипта в нужном компоненте или в index.js:

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

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

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

iziToast предоставляет несколько методов для генерации уведомлений: success, error, warning, info и show. В React-компонентах их удобно использовать в обработчиках событий:

const handleSuccess = () => {
    iziToast.success({
        title: 'Успех',
        message: 'Операция выполнена успешно',
        position: 'topRight',
        timeout: 3000
    });
};

const handleError = () => {
    iziToast.error({
        title: 'Ошибка',
        message: 'Произошла ошибка',
        position: 'topRight',
        timeout: 5000
    });
};

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

  • title – заголовок уведомления.
  • message – текст уведомления.
  • position – расположение на экране (topRight, topLeft, bottomRight, bottomLeft, topCenter, bottomCenter).
  • timeout – время отображения в миллисекундах.

Использование внутри функциональных компонентов

iziToast может вызываться напрямую внутри событий или эффектов. Пример использования в кнопке:

function NotificationButton() {
    const notify = () => {
        iziToast.info({
            title: 'Информация',
            message: 'Это информационное уведомление',
            position: 'bottomLeft'
        });
    };

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

При таком подходе iziToast управляет DOM самостоятельно, поэтому нет необходимости хранить состояние уведомлений в React.

Настройка глобальных параметров

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

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

После глобальной настройки все вызовы iziToast будут использовать указанные параметры по умолчанию, если они не переопределены локально.

Управление уведомлениями

iziToast предоставляет методы для управления уведомлениями после их создания:

  • iziToast.destroy() – удаляет все уведомления.
  • iziToast.hide({ transitionOut: 'fadeOut' }) – скрывает текущее уведомление с анимацией.
  • iziToast.closeAll() – закрывает все открытые уведомления сразу.

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

function CloseAllButton() {
    return <button onCl ick={() => iziToast.closeAll()}>Закрыть все уведомления</button>;
}

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

Метод show позволяет полностью контролировать структуру уведомления, включая кнопки и иконки:

iziToast.show({
    title: 'Внимание',
    message: 'Пользователь должен подтвердить действие',
    icon: 'icon-person',
    timeout: false,
    buttons: [
        ['<button>Ок</button>', (instance, toast) => { instance.hide({ toast }); }],
        ['<button>Отмена</button>', (instance, toast) => { instance.hide({ toast }); }]
    ],
    position: 'center'
});

Особенности кастомизации:

  • timeout: false – уведомление остаётся на экране до действия пользователя.
  • buttons – массив кнопок с привязанными колбэками.
  • icon – кастомная иконка или CSS-класс для отображения.

Интеграция с хуками React

Для удобства вызова уведомлений в разных компонентах часто используют кастомный хук:

import { useCallback } from 'react';
import iziToast from 'izitoast';

export function useToast() {
    const success = useCallback((message) => {
        iziToast.success({ title: 'Успех', message });
    }, []);

    const error = useCallback((message) => {
        iziToast.error({ title: 'Ошибка', message });
    }, []);

    const info = useCallback((message) => {
        iziToast.info({ title: 'Информация', message });
    }, []);

    return { success, error, info };
}

Использование хука в компоненте:

function FormComponent() {
    const toast = useToast();

    const handleSubmit = () => {
        toast.success('Данные отправлены');
    };

    return <button onCl ick={handleSubmit}>Отправить</button>;
}

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

Анимации и стили

iziToast поддерживает различные анимации:

  • transitionIn – анимация появления (fadeIn, bounceIn, flipInX и другие).
  • transitionOut – анимация скрытия (fadeOut, bounceOut, flipOutX).
  • progressBar – отображение индикатора времени.
  • rtl – поддержка правостороннего текста.

Пример с анимацией и прогрессбаром:

iziToast.success({
    title: 'Готово',
    message: 'Процесс завершён',
    transitionIn: 'bounceInLeft',
    transitionOut: 'fadeOutUp',
    progressBar: true
});

Поддержка серверного рендеринга

iziToast напрямую работает с DOM, поэтому при использовании с SSR (например, Next.js) важно вызывать уведомления только на клиенте:

useEffect(() => {
    if (typeof window !== 'undefined') {
        iziToast.info({ message: 'Клиентская загрузка завершена' });
    }
}, []);

Это предотвращает ошибки во время серверного рендеринга и обеспечивает корректное отображение уведомлений.

Оглавление