Какую библиотеку используешь для модальных окон?

Библиотеки для модальных окон в моей практике

Как Senior Frontend Developer с более чем 10-летним опытом, я подхожу к выбору библиотек для модальных окон контекстуально — в зависимости от требований проекта, стека технологий и конкретных задач. Не существует единого "серебряного пули", но есть проверенные решения для разных сценариев.

Основные подходы и библиотеки

1. Для комплексных React приложений: React Modal или Radix UI Dialog

В современных React-проектах я часто использую React Modal — минималистичную, доступную библиотеку с полным контролем над стилями:

import ReactModal from 'react-modal';

<ReactModal
  isOpen={isOpen}
  onRequestClose={closeModal}
  style={{ overlay: { backgroundColor: 'rgba(0,0,0,0.5)' } }}
>
  <h2>Модальное окно</h2>
  <p>Содержимое с полной кастомизацией</p>
</ReactModal>

Радикс UI Dialog стал моим фаворитом для production. Соблюдает WAI-ARIA, правильное управление фокусом и работает из коробки:

import * as Dialog from '@radix-ui/react-dialog';

<Dialog.Root>
  <Dialog.Trigger>Открыть</Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay />
    <Dialog.Content>
      <Dialog.Title>Заголовок</Dialog.Title>
      <Dialog.Description>Описание</Dialog.Description>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

2. Для легковесных проектов или Vanilla JS: Micromodal

Когда React избыточен или нужен простой вариант без фреймворков, Micromodal — отличный выбор. Весит всего ~2KB, имеет чистый API:

MicroModal.init({
  onShow: modal => console.log(`${modal.id} открыт`),
  onClose: modal => console.log(`${modal.id} закрыт`),
  disableScroll: true
});

3. Специализированные решения:

• Для уведомлений/тостов: React Hot Toast или Sonner — анимированные, кастомизируемые
• Для сложных многошаговых форм: собственное решение на основе React Portal и Context API

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

Я всегда оцениваю библиотеки по следующим параметрам:

• Доступность (a11y) — поддержка клавиатурной навигации (Esc, Tab), правильные ARIA.

• Управление фокусом — автоматический возврат фокуса после закрытия, блокировка фокуса внутри модала.

• Производительность — минимум зависимостей, эффективный рендеринг (использую React Portal для избежания проблем с z-index и overflow).

• Кастомизация — возможность полностью контролировать стили без !important.

• Размер бандла — для мобильных приложений критичен каждый килобайт.

Когда пишу собственное решение

Иногда библиотеки не подходят, например:

• Требуется глубокая интеграция с дизайн-системой компании
• Нужны нестандартные анимации (например, связанные с жестами на мобильных)
• Проект имеет уникальные требования к поведению (каскадные модалы, сложная логика закрытия)

В таких случаях создаю компонент на основе React Portals:

const Modal = ({ children, isOpen, onClose }) => {
  const modalRoot = document.getElementById('modal-root');
  
  useEffect(() => {
    const handleEscape = (e) => e.key === 'Escape' && onClose();
    if (isOpen) {
      document.addEventListener('keydown', handleEscape);
      document.body.style.overflow = 'hidden';
    }
    return () => {
      document.removeEventListener('keydown', handleEscape);
      document.body.style.overflow = 'unset';
    };
  }, [isOpen, onClose]);

  if (!isOpen || !modalRoot) return null;

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={e => e.stopPropagation()}>
        {children}
      </div>
    </div>,
    modalRoot
  );
};

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

• Всегда добавляйте модальный root в HTML — <div id="modal-root"></div> для порталов
• Тестируйте с скринридерами (NVDA, VoiceOver) — многие библиотеки декларируют a11y, но не реализуют полностью
• Мобильные устройства — проверяйте поведение при виртуальной клавиатуре и жестах
• Server-Side Rendering — убедитесь, что библиотека не ломает гидратацию в Next.js

В последних проектах чаще выбираю Radix UI за безупречную доступность или пишу кастомное решение, если требования уникальны. Главное — чтобы модальные окна были стабильными, доступными и предсказуемыми для пользователей.