Как я писал компонент уведомлений на React

Ещё во времена когда в React не было хуков я разбирался с контекстом и пробовал понять насколько простые вещи позволяет делать этот API. Я хотел знать может ли контекст заменить Redux и как работает его область видимости. Как пробный проект я начал делать систему уведомлений которая позволяла бы быстро добавлять функциональность которой не было изначально.

Я сделал компонент который в своём state хранил массив с информацией про уведомления и имел методы которые изменяли этот массив. Таким образом я получил привычный способ управления состоянием без необходимости придумывать новые сущности.

const value = {
  notifications: this.state.notifications,
  addNotification: this.addNotification,
  removeNotification: this.removeNotification,
  clearNotifications: this.clearNotifications,
};

return (
  <Provider value={value}>
    {children}
    {createPortal(notificationsPortal, this.el)}
  </Provider>
);

В React контекст работает на основе двух базовых компонентов с помощью которых происходит передача информации от Provider компонента ко всем его дочерним Consumer компонентам. Подготовив объект с данными и методами я передал их провайдеру что сделало его доступным всем компонентам находящимся ниже.

Принцип передачи объекта уведомлений
Принцип передачи объекта уведомлений

Для создания уведомления мы используем объект, ключи которого являются настройками. Мы передаем уникальный идентификатор, время через которое уведомление должно быть удалено и вообще, любое значение моментально попадающее в компонент уведомления. Таким образом, предоставив пользователю возможность переназначить этот компонент мы получаем достаточно гибкий механизм.

Если перед программистом стоит задача раскрасить уведомления в разные цвета или добавить кнопку действия, это легко добавляется без изменения системы. Это именно тот результат, которого мне и хотелось добиться.

Пока я работал над этим проектом поменялся API в React, у меня не было желания переписывать и продвигать это решение, хотя мне казалось что в нём был потенциал. Вероятнее всего я вернусь к этому пакету, когда у меня возникнет необходимость использовать уведомления в рабочем проекте.

react-context-notifications
Simple and flexible notifications system
Демо на Netlify
Сайт с примером работы системы уведомлений