Portal

Maintainer:
amje
GitHub
import {Portal} from '@gravity-ui/uikit';

Portal — утилитный компонент, который представляет собой простую обертку для createPortal в React и позволяет рендерить дочерние элементы в DOM-узле за пределами родительского компонента.

Контейнер

По умолчанию Portal рендерит дочерние элементы в document.body. Это можно поменять в свойстве container. Кроме того, можно задать контейнер для всех порталов в поддереве React с помощью компонента PortalProvder.

import {Portal, PortalProvider} from '@gravity-ui/uikit'

const myRoot = document.getElementById('my-root');

<Portal>This is rendered inside document.body</Portal>
<Portal container={myRoot}>This is rendered inside #my-root node</Portal>
<PortalProvider container={myRoot}>
    <Portal>This is also rendered inside #my-root</Portal>
</PortalProvider>

Свойства

ИмяОписаниеТипЗначение по умолчанию
childrenЛюбое содержимое React.React.ReactNode
containerDOM-элемент, в который монтируются дочерние элементы.HTMLElementdocument.body
disablePortalЕсли установлено значение true, дочерние элементы будут рендериться в стандартной иерархии DOM.boolean