Совсем недавно я работал над веб-приложением, которое позволяло пользователям загружать файлы в назначенную им корзину S3.
Когда пользователь загрузил файл, и серверная служба, которая загрузила файл в корзину S3, вернула ответ, я по умолчанию просто отображал простое текстовое сообщение, окрашенное в красный или зеленый цвет, чтобы пользователь знал, успешно ли завершилась загрузка.
Этот способ показался мне немного некрасивым и устаревшим, поэтому я начал искать альтернативы. Именно тогда я наткнулся на пакет NPM под названием React-Toastify.
Что такое React-Toastify?
Чтобы взглянуть на то, что такое библиотека, мы должны сначала понять, что такое тост. И нет, я не имею в виду хлеб, который вы едите на завтрак.
Быстрый поиск в Google того, что такое тост в программировании, дает следующий ответ:
«Тост» относится к функции пользовательского интерфейса, в которой событие вызывает появление небольшого текстового поля в нижней части экрана. Поведение похоже на кусок хлеба, вылезающий из тостера.
По сути, он предупреждает пользователя о том, что произошло определенное событие. Тост может содержать любую информацию, которая может иметь отношение к пользователю, чтобы сообщить ему, что и почему что-то произошло.
Он возник при разработке Android, но с тех пор появился на других языках и в других фреймворках, таких как ReactJS.
Пакет React-Toastify позволяет разработчику показывать всплывающие сообщения для отображения сообщения и информации для пользователя в течение определенного периода времени.
Самое замечательное в React-Toastify заключается в том, что его очень легко включить в ваш код, чтобы дать пользователю ответ быстро и просто. Не нужно создавать что-то самостоятельно.
Как использовать React-Toastify?
Ну, во-первых, нам нужно установить пакет npm в наш проект реакции:
npm я реагирую на astify
После этого, чтобы начать, все, что вам нужно, - это включить ToastContainer и метод уведомления, чтобы показать контейнер тоста.
ToastContainer - это простой компонент, в который вы можете писать текст или даже настраиваемые элементы JSX, чтобы еще больше настроить тост.
Позвольте мне показать вам, как использовать ToastContainer на простом примере:
В div у нас есть ToastContainer, который служит заполнителем для показываемого тоста. При нажатии кнопки вызывается метод тоста, чтобы уведомить пользователя тостом с надписью «Вау, так просто!».
Существуют даже различные типы методов тостов, которые вы можете вызывать. Вы можете выбрать отображение следующих типов:
- toast.info (…)
- toast.error (…)
- toast.success (…)
- тост. предупреждение (…)
- тост. темный (…)
Каждый из этих методов будет показывать тост другим цветом, чтобы пользователь мог напрямую сказать, что произошло, нормально, в какой-то мере или плохо, без необходимости читать сообщение внутри.
Вы даже можете указать контейнеру тостов, где он должен отображаться, имея варианты отображения:
- верхний левый
- в правом верхнем углу
- верхний центр
- Нижний левый
- Нижний правый
- внизу по центру
браузера. Для этого все, что вам нужно сделать, это перезаписать свойство position, и все готово:
С тостами можно сделать даже больше, но я не буду здесь вдаваться в подробности. Если вам интересно, посмотрите реакцию на демонстрационную страницу astify.