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

Toast-уведомления — это быстрые, ненавязчивые оповещения, которые информируют пользователей, не прерывая их работу. React-Toastify упрощает внедрение таких уведомлений, балансируя между простотой использования и возможностями настройки.
Ключевые моменты
- React-Toastify упрощает добавление toast-уведомлений.
- Поддерживает несколько типов уведомлений (успех, ошибка, предупреждение, информация).
- Настраиваемые позиции и стили.
- Предлагает расширенные функции, такие как уведомления на основе промисов.
Начало работы с 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-Toastify поддерживает пользовательские React-компоненты в качестве содержимого toast.
Установите `autoClose: false` в параметрах toast, чтобы уведомления оставались видимыми.
Да, используйте `toast.update(toastId, options)` с ID toast-уведомления.
Используйте параметр `limit` в `ToastContainer` для контроля одновременных уведомлений.
Да, обеспечьте импорт и рендеринг на стороне клиента, особенно с фреймворками вроде Next.js.