Portal is a wrapper component for ReactDOM.createPortal API.
Render any component or element at the end of
document.body or at a given element. Modal and Drawer components are wrapped in Portal by default.
Use Portal to render a component or an element at a different place (defaults to the end of
Portal is useful when you want to prevent parent styles from interfering with children,
usually all these styles are related to
and portals are used for components with fixed position, for example, modals.
In the example above, the div element is rendered outside of parent main (before closing body tag),
but still receives
onClose props. The element will not be affected by parent z-index.
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.
createPortal is not supported during server side rendering.
All components inside Portal are rendered only after the application was mounted to the dom.
OptionalPortal component lets you configure whether children should be rendered in
It accepts the same props as the