Portal
Usage
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 document.body
).
Portal is useful when you want to prevent parent styles from interfering with child,
usually all these styles are related to position
and z-index
properties
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 opened
and 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 target
prop:
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
OptionalPortal component lets you configure whether children should be rendered in Portal. It accepts the same props as Portal component:
Portal component props
Name | Type | Description |
---|---|---|
children * | ReactNode | Portal children, for example, modal or popover |
innerRef | MutableRefObject<HTMLDivElement> | Root element ref |
target | string | HTMLElement | Element where portal should be rendered, by default new div element is created and appended to document.body |