React-Toastify

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

npm install react-toastify
# или
yarn add react-toastify

После установки нужно импортировать стили библиотеки в корневой файл проекта (обычно index.js или App.js):

import 'react-toastify/dist/ReactToastify.css';

Импорт самого компонента ToastContainer и функции уведомлений:

import { ToastContainer, toast } fr om 'react-toastify';

Основное использование

Создание базового уведомления осуществляется через функцию toast():

toast("Привет! Это уведомление");

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

function App() {
  return (
    <div>
      <button onCl ick={() => toast("Уведомление!")}>Показать уведомление</button>
      <ToastContainer />
    </div>
  );
}

Настройка типов уведомлений

React-Toastify поддерживает несколько предустановленных типов уведомлений, позволяющих визуально различать сообщения:

  • success – успешное действие.
  • error – ошибка.
  • info – информационное сообщение.
  • warning – предупреждение.
  • default – обычное уведомление.

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

toast.success("Операция выполнена успешно");
toast.error("Произошла ошибка");
toast.info("Это информационное сообщение");
toast.warning("Внимание! Проверьте данные");
toast("Обычное уведомление");

Настройка положения уведомлений

Компонент ToastContainer поддерживает параметр position, определяющий расположение уведомлений на экране:

<ToastContainer position="top-right" />
<ToastContainer position="top-center" />
<ToastContainer position="top-left" />
<ToastContainer position="bottom-right" />
<ToastContainer position="bottom-center" />
<ToastContainer position="bottom-left" />

Можно комбинировать несколько параметров, например изменяя отступы через style:

<ToastContainer style={{ marginTop: "50px" }} />

Время отображения и автоматическое закрытие

Время, в течение которого уведомление остаётся видимым, регулируется параметром autoClose в миллисекундах:

toast("Сообщение закроется через 3 секунды", {
  autoClose: 3000
});

Если нужно отключить автоматическое закрытие:

toast("Это уведомление останется до закрытия пользователем", {
  autoClose: false
});

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

React-Toastify предоставляет ряд ключевых настроек:

  • hideProgressBar – скрывает индикатор прогресса.
  • closeOnClick – закрытие при клике по уведомлению.
  • pauseOnHover – пауза таймера при наведении мыши.
  • draggable – возможность перетаскивания уведомления.
  • theme – тема: light, dark, colored, auto.

Пример:

toast("Настроенное уведомление", {
  position: "bottom-left",
  autoClose: 5000,
  hideProgressBar: false,
  closeOnClick: true,
  pauseOnHover: true,
  draggable: true,
  theme: "colored"
});

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

Можно передавать кастомный React-компонент вместо простого текста:

const CustomToast = () => (
  <div>
    <strong>Важное уведомление!</strong>
    <p>Проверьте состояние приложения</p>
  </div>
);

toast(<CustomToast />);

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

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

const id = toast("Уведомление с ID");

toast.update(id, {
  render: "Сообщение обновлено",
  type: toast.TYPE.SUCCESS,
  autoClose: 2000
});

toast.dismiss(id); // закрытие уведомления

Группировка и позиционирование нескольких уведомлений

React-Toastify автоматически управляет стеком уведомлений. Для контроля порядка и количества можно использовать свойства limit и newestOnTop:

<ToastContainer lim it={3} newestOnTop={true} />
  • limit – максимальное количество одновременно отображаемых уведомлений.
  • newestOnTop – отображение новых уведомлений сверху или снизу.

Интеграция с асинхронными операциями

Библиотека позволяет работать с промисами и асинхронными действиями с помощью toast.promise:

const fetchData = async () => {
  await toast.promise(
    fetch("/api/data"),
    {
      pending: "Загрузка данных...",
      success: "Данные успешно загружены",
      error: "Ошибка при загрузке"
    }
  );
};

События уведомлений

React-Toastify предоставляет события для управления уведомлениями:

  • onOpen – срабатывает при открытии.
  • onClose – срабатывает при закрытии.
  • onClick – срабатывает при клике.
  • onExited – срабатывает после завершения анимации закрытия.

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

toast("Сообщение с событиями", {
  onOpen: () => console.log("Открыто"),
  onClose: () => console.log("Закрыто")
});

Кастомизация анимации

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

import { Slide, Zoom, Flip, Bounce } from 'react-toastify';

<ToastContainer transition={Slide} />
toast("Сообщение с анимацией Slide");

Можно выбирать из анимаций: Slide, Zoom, Flip, Bounce или создавать свои кастомные анимации через библиотеку react-transition-group.

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

Типизация уведомлений позволяет строго определять параметры:

toast.success<string>("Успех!", {
  position: "top-right",
  autoClose: 4000
});

Это обеспечивает поддержку автодополнения и строгой проверки типов при работе с функцией toast.

Локализация и мультиязычность

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

import i18n from './i18n';

toast(i18n.t("notifications.success"));

Принципы эффективного использования

  • Использовать уведомления для кратких и важных сообщений.
  • Не перегружать пользователя большим количеством уведомлений.
  • Разделять уведомления по типам (success, error, info) для лучшей визуальной идентификации.
  • Контролировать позицию и время жизни уведомлений в зависимости от важности сообщения.
  • Применять кастомные компоненты и стили для выделения критичных уведомлений.
Оглавление