Portal is wrapper component for ReactDOM.createPortal API.
Render any component or element at the end of
document.body or at given element. Modal and Drawer components are wrapped in Portal by default.
Use Portal to render component or element at different place (defaults to the end of
Portal is useful when you want to prevent parent styles from interfering with child,
usually all these styles are related to
and portals are used for components with fixed position, for example, modals.
In the example above, div element is rendered outside of parent main (before closing body tag),
but still receives
onClose props. Element will not be affected by parent z-index.
Specify target dom node
You can specify dom node where portal will be rendered by passing
Alternatively, you can specify selector to render portal in existing element:
If you don't specify the target element, new one will be created and appended to the
document.body for each Portal component.
Server side rendering
createPortal is not supported during server side rendering.
All components inside Portal are rendered only after application was mounted to the dom.
OptionalPortal component lets you configure whether children should be rendered in Portal. It accepts the same props as Portal component:
Portal component props
|Portal children, for example, modal or popover|
|Root element ref|
string | HTMLElement
|Element where portal should be rendered, by default new div element is created and appended to document.body|