Уведомления являются важной частью разработки любого приложения React, они обеспечивают своевременную и ненавязчивую передачу информации пользователям. Уведомления могут предоставлять пользователям обновления в реальном времени, предупреждать их о важном событии или напоминать о предстоящей задаче.
Существует целый ряд ресурсов, которые могут помочь нам достичь этой цели. Одним из интересных инструментов, которые мы можем использовать, является React-Toastify. Используя React-Toastify, разработчики могут создать лучший пользовательский опыт и держать пользователей в курсе событий.
Это руководство познакомит читателей с React-Toastify и поможет им отображать уведомления, сообщения и всплывающие окна в приложениях React.
Оглавление
Что такое тостовое уведомление?
От слова toast - уведомления называются ”тостовыми”, потому что они предназначены для краткого сообщения, отображения некоторой информации, которая ненадолго появляется на экране, подобно тосту, выскакивающему из тостера. Термин ”тост” в данном контексте относится к сообщению, которое появляется на короткое время и затем исчезает, подобно тому, как тост выскакивает из тостера.
Уведомление может быть ошибкой, предупреждением, успехом, информационным сообщением и так далее, как показано на рисунке ниже:
Что такое React-Toastify?
React-Toastify - это библиотека для React, которая позволяет разработчикам легко создавать и отображать уведомления о тостах в своих React-приложениях. Она предоставляет простой в использовании и настраиваемый интерфейс для создания тостовых уведомлений для проектов React.
React Toastify поддерживает различные параметры стиля, такие как положение, цвет, ширина и анимация. Он также поддерживает обратные вызовы и многое другое. Библиотека React-Toastify также совместима с другими библиотеками, такими как Redux.
Почему именно React-Toastify?
Toastify - это библиотека React.js, созданная независимо, чтобы хорошо работать с вашим проектом React.js. Она популярна среди разработчиков, и некоторые из причин этого следующие:
Тосты - это отличный способ быстро предоставить обратную связь и уведомить пользователей о важных изменениях или обновлениях в вашем веб-приложении.
Toastify позволяет настраивать внешний вид и оформление уведомлений. Вы можете изменять цвета, размер шрифта и положение тостов.
Toastify - легковесная библиотека, ее легко установить и использовать. Она также не требует никаких зависимостей.
Toastify обладает широкими возможностями настройки, позволяя вам настраивать текст, цвета и продолжительность тоста.
Установка и настройка пакета Toastify на вашем приложении React
После создания приложения React используйте любую из приведенных ниже команд для установки пакета React-Toastify.
// NPM
$ npm install --save react-toastify
// YARN
$ yarn add react-toastifyПосле установки пакета мы импортируем его в ваш компонент, как показано ниже. Кроме того, мы импортируем CSS-файл, предоставленный React-Toastify, чтобы инструмент работал правильно.
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';Стилизация уведомлений тостов с помощью React-Toastify
Здесь мы импортируем функцию тоста, компонент ToastContainer и его CSS-файл из библиотеки react-toastify. Мы также обернем наше приложение компонентом ToastContainer, что позволит нам отображать тосты в любом месте вашего приложения.
Далее мы создадим функцию notifyMe в App.js. Мы создадим кнопку для прослушивания события - notifyMe.
import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
function App(){
const notifyMe = () => toast("Welcome user!");
return (
<div>
<button onClick={notifyMe} className="button">Notify me!</button>
<ToastContainer />
</div>
);
}При нажатии на кнопку будет выведено уведомление с сообщением ”Добро пожаловать, пользователь!”, как показано ниже.
Определение различных типов тостовых уведомлений
С помощью эмиттера тостов можно создавать различные тостовые сообщения для передачи конкретной информации пользователям. Использование различных типов тостов может помочь пользователям понять смысл и важность отображаемой информации.
Этот метод использует различные цвета и символы для передачи важности каждого типа тостовых сообщений, чтобы помочь пользователям быстро идентифицировать и понять информацию, которую они видят.
Например, при входе в приложение обычно используется зеленое тостовое сообщение для обозначения успешного ответа, красное тостовое сообщение обычно означает ошибку, а синее тостовое сообщение передает некоторую информацию, как показано ниже.
import React from "react";
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
function App() {
const toastMessage = () => {
toast.success('Success Notification !', {
position: toast.POSITION.TOP_RIGHT
});
toast.error('Error Notification !', {
position: toast.POSITION.TOP_LEFT
});
toast.info('Info Notification !', {
position: toast.POSITION.BOTTOM_RIGHT
});
toast.warning('Warning Notification !', {
position: toast.POSITION.BOTTOM_LEFT
});
};
return (
<div>
<button onClick={toastMessage} className="button">Notify</button>
<ToastContainer />
</div>
);
}
export default App;Блок кода выводит четыре основных уведомления о тостах - успех, ошибка, информация и предупреждение.
Важно отметить, что эти соглашения не являются универсальными, и различные приложения могут использовать разные цвета для своих уведомлений о тостах. Рекомендуется выбирать цвета, которые легко читаются и хорошо контрастируют с цветом фона уведомления о тосте.
Позиционирование тостовых уведомлений
По умолчанию все тосты располагаются в правом верхнем углу браузера. Тосту можно назначить другое положение. React-Toastify позволяет использовать шесть различных позиций:
Правый верхний угол
Вверху по центру
Слева вверху
Снизу-справа
Внизу по центру
Слева внизу
Теперь мы можем расположить наши тосты в любом из указанных выше положений, как показано на рисунке.
const notifyMe = () => {
toast.info('Welcome user !', {
position: toast.POSITION.TOP_RIGHT
});
toast.info('You have 15 unread mail !', {
position: toast.POSITION.TOP_CENTER
});
toast.info('15 minutes to lunch break!', {
position: toast.POSITION.TOP_LEFT
});
toast.info(' Meeting in 10 minutes !', {
position: toast.POSITION.BOTTOM_RIGHT
});
toast.info('Pick up your kids !', {
position: toast.POSITION.BOTTOM_CENTER
});
toast.info('Counsel the interns !', {
position: toast.POSITION.BOTTOM_LEFT
});
}Этот блок кода отобразит различные позиции для уведомлений о тостах.
Как создать пользовательское тостовое уведомление.
Пользовательский тост - это уведомление, которое можно изменить в соответствии с предпочитаемым стилем. Вы можете настроить внешний вид и поведение тоста, передавая опции функции toast. Например, вы можете указать продолжительность, высоту, иконку, шрифт, размер шрифта, положение, hideProgressBar, closeOnClick, autoClose, pauseOnHover и стиль анимации тоста.
В процессе настройки пакет также позволяет внедрить внутрь него свою HTML-структуру. Для наглядности мы создадим пользовательский тост с возможностью увольнения. Тост будет автоматически отключаться через определенное время. Мы также создадим кнопку с ролью ”отмена”, и эта кнопка будет отменять тост. Чтобы отклонить тост после создания, вызовите метод dismiss().
const CustomToast = ({text}) => (
<div>
<p className="text">{text}</p>
<button className="button1" onClick={() => toast.dismiss()}>Dismiss</button>
</div>
);
const customToast = () => {
toast(<CustomToast text="This is a custom toast" />);
};
const App = () => (
<div>
<button onClick={customToast} className="button">Custom toast</button>
<ToastContainer />
</div>
);
export default App;Здесь мы придадим стиль нашему пользовательскому тосту с помощью CSS.
.button{
display: flex;
margin: 350px auto;
padding: 15px 50px;
letter-spacing: 1px;
font-size: 17px;
}
.button1{
border-radius: 3px;
border: none;
padding: 9px;
margin: 20px 0;
}
.text{
font-size: 30px;
color: #844C40;
margin: 20px 0;
}Результат ниже будет отображен в вашем браузере.
Session Replay для разработчиков
Выявить разочарования, понять ошибки и устранить замедления как никогда раньше можно с помощью OpenReplay - пакета воспроизведения сессий с открытым исходным кодом для разработчиков. Его можно установить на собственном хостинге за считанные минуты, что дает вам полный контроль над данными ваших клиентов.
Счастливой отладки! Попробуйте использовать OpenReplay уже сегодня.
Как создать обещанный тост с помощью React-Toastify
Обещание тоста в React - это тип обещания, которое позволяет выполнять асинхронный код. Оно может вызвать определенное действие или событие при отображении тоста, например, перенаправить пользователя на другую страницу или вывести предупреждающее сообщение, при этом любые ошибки обрабатываются должным образом.
Например, обещание тоста может быть использовано для обеспечения того, чтобы во время получения данных из API отображался волчок загрузки, а затем удалялся после успешной загрузки данных.
import React from "react";
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { useEffect } from "react";
function App() {
const store = new Promise((res) =>
fetch("https://fakestoreapi.com/products/")
.then((res) => res.json())
.then((json) => setTimeout(() => res(json), 5000))
);
useEffect(() => {
toast.promise(store, {
pending: "logging in ...",
success: "Welcome user",
error: "Error logging in"
});
},[]);
return(
<>
<ToastContainer/>
</>
)
}
export default App;Из приведенного выше блока кода следует, что при разрешении тоста React promise на экране пользователя появляется уведомление о тосте, указывающее на то, что обещание было выполнено. Уведомление о тосте может содержать сообщение об успехе, сообщение об ошибке или другой тип информации.
Как использовать эффект перехода для тостовых уведомлений.
Эффекты перехода для уведомлений о тостах - это анимация, которая используется для перехода уведомления о тостах. Наиболее распространенными эффектами перехода для тостовых уведомлений являются затухание, скольжение, подпрыгивание и масштабирование. Эти эффекты перехода придают уведомлению о тосте более динамичный и плавный вид.
Чтобы добавить эффекты перехода к уведомлениям о тостах в react-toastify, вы можете использовать параметр transition компонента ToastContainer. Параметр transition должен представлять собой строку, в которой указывается название эффекта перехода.
import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import { Slide, Zoom, Flip, Bounce } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
function App() {
const toastNotify = () => {
toast.success("Slide Effect!", {
transition: Slide,
position: "top-left",
});
toast.error("Zoom Effect!", {
transition: Zoom,
position: "top-right",
})
toast.warning("Flip Effect!", {
transition: Flip,
position: "bottom-left",
})
toast.info("Bounce Effect!", {
transition: Bounce,
position: "bottom-right",
})
};
return (
<div className='App'>
<h1 className="heading">Transition Effect with Toastify React</h1>
<button className='button' onClick={toastNotify}>Pop that toast!</button>
<ToastContainer />
</div>
);
}
export default App;Из приведенного выше блока кода мы импортируем эффекты перехода Slide, Zoom, Flip и Bounce из пакета react-toastify. Мы можем добавить эти эффекты перехода в наши тосты. В вашем браузере это будет выглядеть следующим образом.
Как очищать одиночные и многократные тосты.
Очистка React Toast - это удаление уведомления Toast с экрана. Это делается с помощью метода dismiss() компонента Toast.
Для удаления одного тоста мы передадим аргумент в функцию toast.dismiss. Чтобы убрать все тосты, можно вызвать функцию toast.dismiss без аргументов.
const toastId = React.useRef(null);
const message = () => toastId.current = toast("welcome user");
const clear = () => toast.dismiss(toastId.current);
const clearAll = () => toast.dismiss();
return (
<div className='App'>
<h1 className="heading">Clearing Single and Multiple Toasts</h1>
<button className="button" onClick={message}>Notify</button>
<button className="button" onClick={clear}>Dismiss</button>
<button className="button" onClick={clearAll}>Dismiss All</button>
<ToastContainer />
</div>Из приведенного выше блока кода следует, что один тост убирается при нажатии кнопки отмены, а все уведомления о тостах убираются с экрана при нажатии кнопки отмены всех.
useNotificationCenter в React-Toastify v9
Хук useNotificationCenter - это новая функция React-Toastify v9. Он управляет уведомлениями, например, отображает их, обновляет и удаляет. Хук позволяет разработчикам легко управлять своими уведомлениями и отслеживать их в централизованном месте.
UseNotificationCenter представляет собой коллекцию всех уведомлений, что позволяет нам использовать функции массива, такие как фильтрация, сортировка, сопоставление и т.д. Он также создает экземпляр центра уведомлений, который позволяет добавлять, удалять и обновлять уведомления из любой точки приложения.
Чтобы использовать хук useNotificationCenter, мы импортируем из react-toastify/addons/use-notification-center.
import { useNotificationCenter } from 'react-toastify/addons/use-notification-center';”Он также предоставляет способ получения текущего количества уведомлений, хранения данных уведомлений в состоянии и отслеживания активных уведомлений”. Хорошим примером является корзина электронного магазина.
import React from "react";
import { useNotificationCenter } from "react-toastify/addons/use-notification-center";
import { toast, ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
const App = () => {
const { notifications } = useNotificationCenter();
const message = () => {
toast("Added to your cart !", );
};
return (
<div className="container">
<p className="counter">
You've added <span>{notifications.length}</span> items to your cart.
</p>
<button className="btn" onClick={message}>
Add to cart
</button>
<ToastContainer />
</div>
);
};
export default App;Из приведенного выше блока кода при нажатии на кнопку добавления в корзину всплывает тост-уведомление с сообщением ”Добавлено в корзину”.
Заключение
В этом руководстве мы обсудили, как настроить React-Toastify в нашем приложении React. Мы также обсудили использование, позиционирование и настройку сообщений тостов в нашем приложении React. Использование React-Toastify для сообщений тостов имеет много преимуществ, таких как большое сообщество, простота, легкость, свойства настройки и согласованность во всем приложении.
Мы также рассмотрели, как использовать promise toast и хук useNotificationCenter для создания центра уведомлений и отображения всех наших уведомлений.
В целом, React-Toastify - это ценный и мощный инструмент для создания и отображения тостовых уведомлений в приложении React, который может помочь вам улучшить пользовательский опыт и дизайн вашего приложения.