Какую библиотеку используешь для alert?

Мой подход к уведомлениям (alerts) в React-приложениях

В современной frontend-разработке я не использую нативные alert(), confirm() и prompt() из-за их существенных ограничений: они блокируют основной поток, имеют стандартный стиль браузера, который нельзя кастомизировать, прерывают пользовательский опыт и плохо работают в асинхронных сценариях. Вместо этого я выбираю специализированные библиотеки для создания гибких, доступных и визуально интегрированных уведомлений.

Основная библиотека: React Hot Toast

В большинстве проектов я использую React Hot Toast как оптимальное решение для toast-уведомлений. Вот почему:

import toast, { Toaster } from 'react-hot-toast';

// Базовые уведомления
toast.success('Успешно сохранено!');
toast.error('Ошибка загрузки данных');
toast.loading('Загрузка...');

// Кастомизация
toast.custom((t) => (
  <div className="custom-toast">
    <CustomIcon />
    <span>Кастомное уведомление</span>
    <button onClick={() => toast.dismiss(t.id)}>Закрыть</button>
  </div>
));

// В корневом компоненте
const App = () => (
  <>
    <Toaster 
      position="top-right"
      toastOptions={{
        duration: 4000,
        style: { background: '#333', color: '#fff' },
      }}
    />
    {/* Остальное приложение */}
  </>
);

Преимущества React Hot Toast:

• Минимальный bundle size (~5KB)
• Полная кастомизация через JSX
• Встроенные типы: success, error, loading, promise
• Поддержка порталов для правильного позиционирования
• Активная разработка и хорошая документация

Альтернативы для различных сценариев

В зависимости от требований проекта, я рассматриваю и другие решения:

1. Для комплексных модальных окон: React Modal

   import Modal from 'react-modal';
   
   Modal.setAppElement('#root');
   
   const AlertModal = ({ isOpen, onClose, message }) => (
     <Modal
       isOpen={isOpen}
       onRequestClose={onClose}
       style={customStyles}
       ariaHideApp={false}
     >
       <h2>Важное уведомление</h2>
       <p>{message}</p>
       <button onClick={onClose}>Закрыть</button>
     </Modal>
   );
   

2. Для системных уведомлений: Sonner

   • Современный аналог с поддержкой React Server Components
   • Отличная анимация и темная тема из коробки

3. Для enterprise2 приложений: Ant Design Notifications

   import { notification } from 'antd';
   
   notification.success({
     message: 'Успех',
     description: 'Операция выполнена',
     placement: 'bottomRight',
   });
   

Критерии выбора библиотеки

При выборе библиотеки я оцениваю:

1. Размер бандла – критично для производительности
2. Доступность (a11y) – поддержка клавиатуры, ARIA-атрибутов
3. Кастомизация – возможность адаптировать под дизайн-систему
4. API – интуитивный и типобезопасный (с TypeScript)
5. Анимации – плавные появления/исчезновения
6. Позиционирование – корректная работа в порталах

Кастомная реализация для полного контроля

В некоторых случаях, особенно когда нужны специфические требования к анимациям или управлению состоянием, я создаю собственное решение:

import { createContext, useContext, useState } from 'react';

const AlertContext = createContext();

export const AlertProvider = ({ children }) => {
  const [alerts, setAlerts] = useState([]);
  
  const addAlert = (alert) => {
    const id = Date.now();
    setAlerts([...alerts, { ...alert, id }]);
    
    setTimeout(() => {
      setAlerts(current => current.filter(a => a.id !== id));
    }, alert.duration || 5000);
  };
  
  return (
    <AlertContext.Provider value={{ addAlert }}>
      {children}
      <div className="alert-container">
        {alerts.map(alert => (
          <AlertComponent key={alert.id} {...alert} />
        ))}
      </div>
    </AlertContext.Provider>
  );
};

// Хук для использования
export const useAlert = () => useContext(AlertContext);

Практические рекомендации

• Для toast-уведомлений (краткие сообщения о результатах действий) – React Hot Toast
• Для критических alert'ов (требующие подтверждения) – кастомные модальные окна
• В компонентных библиотеках (Ant Design, Material-UI) – использую встроенные решения
• В micro-frontend архитектуре – стандартизирую одну библиотеку для всех модулей

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