Создание React-компонента

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

npm install izitoast

или

yarn add izitoast

После установки импортируем CSS и JS в компонент или в точку входа приложения, например в index.js:

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

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

Основной синтаксис вызова iziToast

Базовый вызов уведомления осуществляется через метод iziToast.show:

iziToast.show({
  title: 'Пример',
  message: 'Это уведомление iziToast',
  position: 'topRight',
  timeout: 5000
});

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

title – заголовок уведомления.
message – основной текст.
position – положение на экране (topRight, topLeft, bottomRight, bottomLeft, center).
timeout – время показа в миллисекундах. Значение 0 оставляет уведомление до ручного закрытия.

Создание React-компонента для уведомлений

Для удобства в React создается обертка-компонент. Она не рендерит JSX, а предоставляет методы для вызова уведомлений.

// components/Toast.js
import iziToast from 'izitoast';
import 'izitoast/dist/css/iziToast.min.css';

const Toast = {
  success: (message, title = 'Успех') => {
    iziToast.success({
      title,
      message,
      position: 'topRight',
      timeout: 3000,
      progressBarColor: '#4caf50',
    });
  },

  error: (message, title = 'Ошибка') => {
    iziToast.error({
      title,
      message,
      position: 'topRight',
      timeout: 4000,
      progressBarColor: '#f44336',
    });
  },

  info: (message, title = 'Информация') => {
    iziToast.info({
      title,
      message,
      position: 'topRight',
      timeout: 3000,
      progressBarColor: '#2196f3',
    });
  },

  warning: (message, title = 'Внимание') => {
    iziToast.warning({
      title,
      message,
      position: 'topRight',
      timeout: 3500,
      progressBarColor: '#ff9800',
    });
  }
};

export default Toast;

Использование компонента в React-приложении

Импортируем компонент и вызываем методы в нужных местах:

import React from 'react';
import Toast from './components/Toast';

const App = () => {
  const handleClick = () => {
    Toast.success('Данные успешно сохранены!');
  };

  return (
    <div>
      <button onCl ick={handleClick}>Сохранить</button>
    </div>
  );
};

export default App;

Методы компонента позволяют централизованно управлять уведомлениями и изменять их стиль в одном месте.

Настройка глобальных опций iziToast

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

iziToast.settings({
  timeout: 4000,
  position: 'topRight',
  theme: 'light', // light или dark
  transitionIn: 'fadeInDown',
  transitionOut: 'fadeOutUp',
  drag: true
});

Эти настройки применяются ко всем уведомлениям, если не указаны локальные параметры.

Интеграция с формами и событиями

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

const handleSubmit = async () => {
  try {
    await api.saveData(formData);
    Toast.success('Форма отправлена успешно');
  } catch (err) {
    Toast.error('Произошла ошибка при отправке формы');
  }
};

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

Продвинутые возможности

1. Кастомные кнопки:

iziToast.show({
  title: 'Подтверждение',
  message: 'Вы уверены, что хотите удалить?',
  buttons: [
    ['<button>Да</button>', function (instance, toast) {
      instance.hide({ transitionOut: 'fadeOut' }, toast);
      console.log('Удаление подтверждено');
    }],
    ['<button>Нет</button>', function (instance, toast) {
      instance.hide({ transitionOut: 'fadeOut' }, toast);
    }]
  ]
});

2. HTML-содержимое:

iziToast.show({
  title: 'HTML уведомление',
  message: '<b>Жирный текст</b> и <i>курсив</i>',
  position: 'bottomLeft',
  timeout: 5000,
  close: false
});

3. События:

iziToast.show({
  title: 'Событие',
  message: 'События на уведомлении',
  onOpening: () => console.log('Открывается'),
  onClosing: () => console.log('Закрывается')
});