Совсем недавно я работал над веб-приложением, которое позволяло пользователям загружать файлы в назначенную им корзину 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.