Как работает портал?

React Portal

Portal рендерит компонент в другую часть DOM. Решает проблему overflow.

import { createPortal } from 'react-dom';

function Modal({children}) {
  return createPortal(
    <div className='modal'>{children}</div>,
    document.body
  );
}

Проблема

Модаль в div с overflow:hidden будет обрезана.

Решение

Рендерим в body вместо родителя.

События

События пробивают портал - поднимаются по React дереву.

Контекст

Контекст НЕ пробивает - используй явно.

Применение

Модали, тултипы, меню, уведомления.