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

В зависимости от ваших потребностей различные библиотеки компонентов уже предоставляют элементы Toast с более высокой степенью сложности. Давайте создадим легкую и доступную систему Toast, которую можно использовать в вашей пользовательской библиотеке компонентов.

Требования

Наш компонент решит три основные инженерные проблемы.

  1. Визуализация — компонент должен иметь возможность рендеринга без ручного размещения в модели DOM. Таким образом, угождая опыт разработчика.
  2. Отображение — всплывающее уведомление должно запускаться из любого места в дереве компонентов реакции. Функцию, которая показывает и скрывает элемент, также следует экспортировать.
  3. Скрытие — когда компонент виден, он должен автоматически скрываться через определенный интервал времени. Этот интервал может быть прерван, если курсор находится сверху.

Четко определив наши требования, мы можем приступить к созданию правильного решения для наших нужд.

Выполнение

Следующая реализация не охватывает одновременное отображение нескольких всплывающих уведомлений. Если вам интересна такая тема, пожалуйста, оставьте комментарий.

Давайте определим основной набор стилей CSS, которые применяются к нашему тосту. Для нашей системы мы не будем определять все возможные позиционные свойства (внизу по центру, внизу справа и т. д.). Вместо этого мы разместим наш компонент в левом нижнем углу окна просмотра.

Мы используем свойство CSS will-change со значением transform, чтобы заблаговременно уведомить браузер о происходящей анимации. Выбор transform вместо анимации свойства bottom является преднамеренным.

Поступая таким образом, мы активно избегаем дорогостоящих вычислений макета. У Мэттью Костелло есть отличная статья о несоответствии между компоновкой CSS и составными свойствами.

Давайте определим две функции ShowToast и HideToast, которые используют ReactDOM.render и ReactDOM.unmountComponentAtNode соответственно. Эти функции удовлетворяют первым двум требованиям, изложенным в предыдущем разделе.

Функция ShowToast пересылает свойства, определяющие поведение компонента. Второй параметр с атрибутом HTML id размещает наш компонент Toast в любом месте дерева DOM. Если идентификатор элемента не найден, мы программно создаем div и добавляем его внизу body.

Мы создали жизненный цикл компонента, чтобы удовлетворить наше последнее требование. Как только компонент монтируется, мы запускаем setTimeout, который автоматически удаляет элемент через определенный промежуток времени (по умолчанию 4,5 секунды). Жизненный цикл может быть прерван, когда курсор входит в нашу цель. Соответственно, он будет возобновлен, когда курсор уйдет, и, следовательно, перезапустит жизненный цикл.

Элемент <output /> содержит все соответствующие прослушиватели событий мыши. С точки зрения доступности элемент HTML имеет неявный role=”status” и представляет собой результат действия пользователя. Для большей совместимости рекомендуется явно добавлять атрибут роли.

Наконец, мы используем варианты setTimeout и clearTimeout с интервалом между именами window. Если требуется рендеринг на стороне сервера, рекомендуется использовать альтернативы NodeJS.

Заключение

Пожалуйста, не стесняйтесь изменять вышеупомянутую реализацию, чтобы она соответствовала вашей спецификации. Ниже вы можете найти ссылки на ссылки, используемые в этом проекте, а также несколько замечательных библиотек с открытым исходным кодом.

Надеюсь, вы найдете эту статью полезной для своего собственного проекта React!

Рекомендации

Библиотеки тостов с открытым исходным кодом

Пожалуйста, поделитесь этим постом с другими и похлопайте 👏🏻 внизу.

Подписываясь и аплодируя, вы помогаете другим находить этот контент и мотивируете на написание новых статей о специальных возможностях, React, JavaScript и TypeScript!

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

  • 👏 Хлопайте за историю и подписывайтесь на автора 👉
  • 📰 Смотрите больше контента в публикации Level Up Coding
  • 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу