React.createPortal reference
2 October 2024 (Updated 2 October 2024)
On this page
createPortal
lets you render some children into a DOM node of your choice:
<div>
<SomeComponent />
{createPortal(children, domNode, key?)}
</div>
Syntax:
createPortal(children, domNode, key?)
A portal only changes the physical placement of the DOM node. In every other way, the JSX you render into a portal acts as a child node of the React component that renders it. For example, the child can access the context provided by the parent tree, and events bubble up from children to parents according to the React tree.
Why use a portal?
Portals let your components render some of their children into a different place in the DOM. This lets a part of your component “escape” from whatever containers it may be in. For example, a component can display a modal dialog or a tooltip that appears above and outside of the rest of the page.
Sources / links
Tagged:
React