Как создать Toast-сообщения в React с помощью Toastify

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

Начало работы с React-Toastify

Установка

Установите React-Toastify:

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

Базовая настройка

Импортируйте необходимые компоненты и CSS:

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

Разместите ToastContainer в вашем основном приложении:

function App() {
  return (
    <div>
      <button onClick={() => toast(""Hello, Toastify!"")}>Notify</button>
      <ToastContainer />
    </div>
  );
}

Типы Toast-уведомлений

Используйте определенные типы toast для ясности:

• Успех: toast.success(""Успешно сохранено!"");
• Ошибка: toast.error(""Произошла ошибка!"");
• Предупреждение: toast.warning(""Проверьте ваш ввод!"");
• Информация: toast.info(""Доступно обновление!"");
• По умолчанию: toast(""Нейтральное сообщение"");

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

Позиционирование

Настройте позиции toast:

toast(""Сообщение"", { position: ""bottom-center"" });

Позиции включают top-right, top-center, top-left, bottom-right, bottom-center и bottom-left.

Стилизация

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

toast(""Стилизованный toast"", { className: ""custom-toast"" });

Пример CSS:

.custom-toast {
  background: navy;
  color: white;
  border-radius: 4px;
}

Условная стилизация

Стилизация на основе типа:

const notify = (type, message) => {
  toast[type](message, { className: `${type}-toast` });
};

Расширенные функции

Toast на основе промисов

Удобная обработка асинхронных операций:

const promise = fetch('url').then(res => res.json());
toast.promise(promise, {
  pending: ""Загрузка..."",
  success: ""Успешно загружено!"",
  error: ""Не удалось загрузить данные.""
});

Пользовательское содержимое

Включение React-компонентов:

toast(<div>Пользовательский HTML-контент <button onClick={() => alert('Нажато!')}>Нажми</button></div>);

Центр уведомлений

Легкое отслеживание уведомлений:

import { useNotificationCenter } from 'react-toastify/addons/use-notification-center';

const NotificationCenter = () => {
  const { notifications, markAllAsRead } = useNotificationCenter();
  return (
    <div>
      <button onClick={markAllAsRead}>Отметить все как прочитанные</button>
      {notifications.map(n => <div key={n.id}>{n.content}</div>)}
    </div>
  );
};

Лучшие практики

• Используйте экономно: Избегайте перегрузки пользователей.
• Выбирайте подходящие типы: Четко сообщайте о намерении сообщения.
• Тщательно устанавливайте продолжительность: Важные сообщения требуют более длительной видимости.
• Доступность: Обеспечивайте читаемый контент и четкий контраст.
• Краткие сообщения: Ясно указывайте, что требуется.

Полный пример реализации

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

function ProfileForm() {
  const [data, setData] = useState({ username: """", email: """" });

  const handleSubmit = (e) => {
    e.preventDefault();

    if (!data.username || !data.email) {
      toast.warning(""Все поля обязательны!"");
      return;
    }

    const saveData = new Promise((resolve, reject) => {
      setTimeout(() => {
        data.email.includes(""@"") ? resolve() : reject();
      }, 1500);
    });

    toast.promise(saveData, {
      pending: ""Сохранение..."",
      success: ""Профиль обновлен!"",
      error: ""Неверный email!""
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type=""text""
        placeholder=""Имя пользователя""
        value={data.username}
        onChange={(e) => setData({ ...data, username: e.target.value })}
      />
      <input
        type=""email""
        placeholder=""Email""
        value={data.email}
        onChange={(e) => setData({ ...data, email: e.target.value })}
      />
      <button type=""submit"">Отправить</button>
      <ToastContainer />
    </form>
  );
}

Заключение

React-Toastify помогает создавать эффективные, ненавязчивые уведомления в приложениях React. Его простота и гибкость обеспечивают быструю интеграцию, позволяя при этом глубоко настраивать уведомления под нужды вашего приложения.

Часто задаваемые вопросы

Могу ли я использовать пользовательские React-компоненты в toast-уведомлениях?

Да, React-Toastify поддерживает пользовательские React-компоненты в качестве содержимого toast.

Как сделать уведомления постоянными до их закрытия?

Установите `autoClose: false` в параметрах toast, чтобы уведомления оставались видимыми.

Могу ли я обновлять существующие toast?

Да, используйте `toast.update(toastId, options)` с ID toast-уведомления.

Как обрабатывать несколько toast одновременно?

Используйте параметр `limit` в `ToastContainer` для контроля одновременных уведомлений.

Поддерживает ли React-Toastify SSR?

Да, обеспечьте импорт и рендеринг на стороне клиента, особенно с фреймворками вроде Next.js.