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

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

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

После установки подключается CSS библиотеки:

import 'react-toastify/dist/ReactToastify.css';
import { ToastContainer, toast } from 'react-toastify';

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

function App() {
  return (
    <div>
      <ToastContainer />
      {/* Остальная разметка */}
    </div>
  );
}

Основные методы для создания уведомлений

Toastify предоставляет метод toast, который позволяет создавать уведомления различного типа.

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

toast("Простое уведомление");
toast.success("Операция успешна");
toast.error("Произошла ошибка");
toast.info("Информационное сообщение");
toast.warn("Предупреждение");

Каждое уведомление можно настраивать через объект опций.

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

  • position — расположение уведомления на экране. Возможные значения:

    • toast.POSITION.TOP_LEFT
    • toast.POSITION.TOP_RIGHT
    • toast.POSITION.BOTTOM_LEFT
    • toast.POSITION.BOTTOM_RIGHT
    • toast.POSITION.TOP_CENTER
    • toast.POSITION.BOTTOM_CENTER

  • autoClose — время автоматического закрытия уведомления в миллисекундах. Если указать false, уведомление останется до закрытия вручную.

  • hideProgressBar — скрыть или показать индикатор прогресса.

  • closeOnClick — разрешить закрытие по клику.

  • pauseOnHover — приостановка таймера при наведении.

  • draggable — разрешить перемещение уведомления мышью.

Пример с опциями:

toast.success("Данные сохранены", {
  position: toast.POSITION.TOP_RIGHT,
  autoClose: 3000,
  hideProgressBar: false,
  closeOnClick: true,
  pauseOnHover: true,
  draggable: true,
});

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

Toastify позволяет программно управлять уведомлениями.

Закрытие уведомления:

const id = toast("Задача выполняется");
// Закрыть через 2 секунды
setTimeout(() => toast.dismiss(id), 2000);

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

toast.dismiss();

Обновление уведомления:

const id = toast("Загрузка...");
setTimeout(() => {
  toast.update(id, {
    render: "Загрузка завершена",
    type: toast.TYPE.SUCCESS,
    autoClose: 2000
  });
}, 3000);

Использование Toastify с асинхронными действиями

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

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

toast.promise автоматически покажет разные уведомления в зависимости от состояния промиса: ожидание, успех, ошибка.

Кастомизация внешнего вида

Toastify позволяет изменять стили через классы и стили CSS.

Пример кастомного уведомления:

toast("Кастомное уведомление", {
  className: "custom-toast",
  bodyClassName: "custom-toast-body",
  progressClassName: "custom-toast-progress"
});

CSS:

.custom-toast {
  background-color: #333;
  color: #fff;
  font-weight: bold;
}

.custom-toast-body {
  font-size: 16px;
}

.custom-toast-progress {
  background: linear-gradient(to right, #00f, #0ff);
}

Интеграция с компонентами React

Уведомления можно вызывать из любых компонентов, включая функциональные и классовые. В функциональных компонентах удобно использовать хуки для вызова уведомлений после событий:

function SubmitButton() {
  const handleClick = () => {
    toast.info("Отправка данных...");
  };

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

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

class Form extends React.Component {
  handleSubmit = () => {
    toast.success("Форма отправлена");
  };

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

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

  • Контроль очереди уведомлений: limit в ToastContainer ограничивает количество одновременно отображаемых уведомлений.
  • События при открытии/закрытии:
<ToastContainer
  onO pen={() => console.log("Уведомление показано")}
  onCl ose={() => console.log("Уведомление скрыто")}
/>
  • RTL-поддержка: параметр rtl={true} меняет направление текста на Right-to-Left.
  • Встраивание JSX: можно использовать JSX внутри уведомлений для сложного форматирования:
toast(<div><strong>Успех!</strong> Данные обновлены.</div>);
  • Контроль позиции и анимации: доступны встроенные анимации Slide, Zoom, Flip, Bounce.
import { Slide } from 'react-toastify';

<ToastContainer transition={Slide} />

Практические рекомендации

  • Разделять уведомления по типам (success, error, info) для лучшей визуальной организации.
  • Использовать toast.promise для работы с асинхронными вызовами — это повышает читаемость кода.
  • Ограничивать количество одновременных уведомлений, чтобы интерфейс оставался чистым.
  • Для сложного форматирования использовать JSX внутри toast().

Этот набор возможностей делает Toastify универсальным инструментом для управления уведомлениями в React, обеспечивая гибкость, кастомизацию и удобство интеграции с любыми компонентами приложения.

Оглавление