#статья дня

Я тут в нашем продукте всё пытаюсь сделать идеальные всплывающие уведомления, aka тосты.

Потому что выскакивают, как хлеб из тостера.

Поначалу они были сугубо императивные, вызвали уведомление вручную, вручную же скрыли все разом или по некому id. Потом я решил объединить уведомления и некоторые виды модальных окон (например, подтверждение или отмену действия).

Параллельно я начал переписывать императивные уведомления на React, потому что на тот момент приложение стало гибридным. Получалось вроде неплохо. Но в какой-то момент...

В какой-то момент я на полную познал, что такое гипотеза Чёрной Королевы (забавно, что в английском языке — Красной Королевы). В простейшем варианте она звучит так: "Нужно бежать, чтобы оставаться на месте". Непомерно много усилий требуется, чтобы лишь чуть-чуть двигаться вперёд.

В мире разработки она же значит, что на один закрытый баг — получаешь пятнадцать новых :)

Да, пришло время признать, что я со своей реализацией уведомлений зашёл в тупик, и надо смотреть в сторону альтернатив.

И тут попадается нечто прекрасное, компонент Sonner: https://emilkowal.ski/ui/building-a-toast-component

И сразу ссылка на репозиторий: https://github.com/emilkowalski/sonner

Статья буквально на острие взаимодействия CSS и JS, объяснены принципы построения анимаций на CSS-переменных и управления ими из React-приложения.

Сами же тосты реализованы на простой шине событий, что весьма надёжно.

В общем, я ещё свой поиск идеальной реализации не завершил, но Sonner — максимально к ней близок.

#react #toasts #notification #animation