Простой компонент уведомлений в React

Создайте лёгкий и переиспользуемый компонент уведомлений в React без лишних зависимостей. В этой статье пошагово показано, как быстро настроить проект с Vite, реализовать компонент Notification с тремя типами (success, warning, error), стилизовать его через CSS и добавить базовую интерактивность и анимации.

Скриншот приложений с уведомлениями в почтовом приложении.

Эта заметка предназначена для фронтенд‑разработчиков, которые хотят простое решение для уведомлений в React без тяжёлых библиотек. Мы реализуем компактный Notification-компонент, показывающий разные типы сообщений, и добавим базовую интерактивность и рекомендации по UX.

Что мы собираемся получить

Универсальный компонент с пропсами type, title, description.
Три визуальных варианта: успех, предупреждение, ошибка.
Простая система CSS‑классов для цветовых тем.
Подсказки по UX, аксессибилити, тестам и интеграции.

Установка проекта с Vite

Используем Vite для быстрого прототипирования React-приложения.

Запустите создание проекта через yarn:

yarn create vite

Следуйте подсказкам: укажите имя проекта, выберите framework: react, variant: JavaScript.

Конфигурация, используемая в этом руководстве:

Скриншот конфигурации проекта.

После создания проекта перейдите в папку и откройте её в редакторе. Для запуска режима разработки выполните:

yarn dev

По умолчанию приложение откроется в браузере по адресу http://localhost:5173/.

Дизайн компонента уведомления

Компонент должен быть гибким: принимать заголовок, описание и тип уведомления. Это позволяет использовать один и тот же компонент для разных случаев — информационные сообщения, успешные операции и ошибки.

Ниже изображены варианты уведомлений, которые мы хотим поддержать.

Скриншоты разных типов уведомлений: успех, предупреждение, ошибка.

Архитектурно компонент получает три пропса: type, title, description. type определяет визуальную тему и иконку.

Создание компонента Notification

В папке src создайте файл Notification.jsx и добавьте следующий код:

export default function Notification({type, title, description}) {  
  return (  
      
        {/* Notification content */}  
      
  )  
}

Этот код создаёт функциональный компонент Notification с тремя пропсами: type, title и description. Мы будем использовать их для заполнения содержимого и применения стилей.

Компонент содержит две иконки: информационную и крестик для закрытия. Можно использовать собственные SVG или пакет иконок. В примерах используется библиотека react-icons:

yarn add react-icons

Импорт иконок в Notification:

import { RxCross2, RxInfoCircled } from "react-icons/rx"

Далее обновим компонент, чтобы он рендерил иконки и текст:

export default function Notification({type, title, description}) {  
  return (  
      
          
              
              
                {title}  
                {description}  
              
          
          
      
  )  
}

Стилизация через CSS

Создайте файл notification.css и импортируйте его в Notification.jsx:

import "./notification.css"

Базовые стили:

.notification {  
  display: flex;  
  flex-direction: row;  
  align-items: flex-start;  
  padding: 8px;  
}  
.notification__left {  
  display: flex;  
  flex-direction: row;  
  padding: 0px;  
  gap: 8px;  
  margin-right: 24px;  
}  
.notification__content {  
  display: flex;  
  flex-direction: column;  
  align-items: flex-start;  
  padding: 0px;  
}  
.notification__title {  
  font-family: "Inter";  
  font-style: normal;  
  font-weight: 500;  
  font-size: 14px;  
}  
.notification__description {  
  font-family: "Inter";  
  font-style: normal;  
  font-weight: 400;  
  font-size: 12px;  
  padding: 0;  
}

Темы для разных типов:

.notification__success {  
  background: #f6fef9;  
  border: 1px solid #2f9461;  
  border-radius: 8px;  
}  
  
.notification__error {  
  background: #fffbfa;  
  border: 1px solid #cd3636;  
  border-radius: 8px;  
}  
.notification__warning {  
  background: #fffcf5;  
  border: 1px solid #c8811a;  
  border-radius: 8px;  
}

Цвета заголовков и описаний:

.notification__title__success {  
  color: #2f9461;  
}  
  
.notification__title__warning {  
  color: #c8811a;  
}  
.notification__title__error {  
  color: #cd3636;  
}  

.notification__description__success {  
  color: #53b483;  
}  
  
.notification__description__warning {  
  color: #e9a23b;  
}  
.notification__description__error {  
  color: #f34141;  
}  

.notification_icon_error {  
  color: #cd3636;  
}  
.notification__icon__success {  
  color: #2f9461;  
}  
  
.notification__icon__warning {  
  color: #c8811a;  
}

В компоненте мы будем динамически применять классы в зависимости от пропса type:

export default function Notification({type, title, description}) {  
  return (  
      
          
              
              
                {title}  
                {description}  
              
          
          
      
  )  
}

Использование в App.jsx

Импортируйте компонент и используйте его так:

import Notification from './Notification'  
  
function App() {  
  return (  
    <>  
        
      
  )  
}  
  
export default App

Передавайте другие типы: “error” или “warning” для соответствующих стилей.

Интерфейс пользователя и UX рекомендации

Цвета должны соответствовать ожидаемым ассоциациям: зелёный — успех, красный — ошибка, жёлтый/оранжевый — предупреждение.
Длина заголовка: до 60 символов. Описание: кратко, до 140 символов.
Действия: если уведомление требует действия, добавьте кнопку или ссылку внутри компонента.
Аксессибилити: добавьте role=”status” для информационных уведомлений и role=”alert” для ошибок; применяйте aria-live при динамическом обновлении.

Пример добавления aria-атрибутов в компонент:

...

Анимации и автоматическое закрытие

Немного анимации делает уведомления приятнее. Рекомендованные значения:

Время появления: 200–350мс.
Время исчезновения: 150–250мс.
Пауза перед автоскрытием: 3–6 секунд по умолчанию.

Пример простого автоскрытия внутри Notification с использованием useEffect (оставьте код на усмотрение интеграции):

// Примерная логика в компоненте Notification
useEffect(() => {
  if (!duration || duration <= 0) return;
  const t = setTimeout(() => onClose?.(), duration);
  return () => clearTimeout(t);
}, [duration, onClose]);

Не забудьте передать props duration и onClose при необходимости.

Когда такой подход не подходит

Нужно очередь уведомлений с управлением видимостью и ограничением числа одновременно видимых — лучше взять готовую библиотеку (notistack, react-toastify) или реализовать диспетчер.
Требуется централизованное управление с серверным рендерингом и сохранением истории уведомлений — разумно выбрать более зрелую систему уведомлений.
Нужна сложная логика позиционирования и перекрытия (stacking) на разных вьюпортах.

Альтернативные подходы

Хранить уведомления в глобальном состоянии (Redux, Zustand) и рендерить стек уведомлений через провайдер.
Использовать портал (ReactDOM.createPortal) для рендеринга уведомлений над остальной страницей.
Интегрировать анимации через библиотеку Framer Motion для более предсказуемых переходов.

Мини‑методология разработки

Спроектировать API компонента: prop types, callbacks (onClose, onClickAction), duration.
Реализовать статический рендер для всех типов.
Добавить стили и темы через CSS или CSS-in-JS.
Добавить aria‑атрибуты и тесты для чтения экранными ридерами.
Покрыть тестами отображение, автоскрытие и обработку клика по кресту.
Интегрировать в приложение: portal или локальный рендер.

Критерии приёмки

Компонент рендерится без ошибок с type=”success”/“warning”/“error”.
Заголовок и описание отображаются корректно.
Иконки соответствуют теме и имеют смысловую подпись (aria-hidden при необходимости).
При передаче onClose вызывается функция при клике на крестик.
При передаче duration уведомление автоматически скрывается.
Уведомление доступно для экранных ридеров (aria-live/role проверены).

Чек‑лист ролей

Developer:

Реализовать компонент и стили.
Добавить unit/interaction тесты.

Designer:

Подтвердить цвета, отступы и иконографику.
Убедиться в читаемости на разных фонах.

QA:

Проверить автоскрытие, клики, keyboard accessibility.
Проверить поведение при отсутствии сетевого соединения (если уведомления связаны с сетью).

Тестовые сценарии

Отображение для каждого типа: success, warning, error.
Клик на крестик вызывает onClose.
Автоскрытие через заданный duration.
aria-live работает: экранный ридер получает сообщение.

Примеры расширения

Stack manager: реализовать компонент NotificationsProvider, который хранит массив уведомлений и рендерит их в портале.
Action buttons: добавить кнопки подтверждения/отмены прямо в уведомлении.
Persistence: опционально сохранять важные уведомления в store для последующего просмотра.

Подсказки по миграции и совместимости

При переходе от готовых библиотек к собственному решению учтите: обработка очереди, deduplication, и internationalization.
Если приложение использует серверный рендеринг, рендерьте уведомления на клиенте через портал, чтобы избежать mismatch.

Итог

Мы реализовали лёгкий и понятный компонент уведомлений в React. Такой подход хорош для простых случаев: он уменьшает число зависимостей, даёт контроль над стилем и поведением и легко расширяется. Для более сложных сценариев (очереди, хранение истории, сложные позиции) стоит рассмотреть специализированные решения.

Важно