Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
\nReactDOM.createPortal(child, container)The first argument (child) is any renderable React child, such as an element, string, or fragment. The second argument (container) is a DOM element.
Normally, when you return an element from a component’s render method, it’s mounted into the DOM as a child of the nearest parent node:
\nrender() {\n // React mounts a new div and renders the children into it\n return (\n <div> {this.props.children}\n </div> );\n}However, sometimes it’s useful to insert a child into a different location in the DOM:
\nrender() {\n // React does *not* create a new div. It renders the children into `domNode`.\n // `domNode` is any valid DOM node, regardless of its location in the DOM.\n return ReactDOM.createPortal(\n this.props.children,\n domNode );\n}A typical use case for portals is when a parent component has an overflow: hidden or z-index style, but you need the child to visually “break out” of its container. For example, dialogs, hovercards, and tooltips.
\n\n\nNote:
\nWhen working with portals, remember that managing keyboard focus becomes very important.
\nFor modal dialogs, ensure that everyone can interact with them by following the WAI-ARIA Modal Authoring Practices.
\n
Even though a portal can be anywhere in the DOM tree, it behaves like a normal React child in every other way. Features like context work exactly the same regardless of whether the child is a portal, as the portal still exists in the React tree regardless of position in the DOM tree.
\nThis includes event bubbling. An event fired from inside a portal will propagate to ancestors in the containing React tree, even if those elements are not ancestors in the DOM tree. Assuming the following HTML structure:
\n<html>\n <body>\n <div id=\"app-root\"></div>\n <div id=\"modal-root\"></div>\n </body>\n</html>A Parent component in #app-root would be able to catch an uncaught, bubbling event from the sibling node #modal-root.
// These two containers are siblings in the DOM\nconst appRoot = document.getElementById('app-root');\nconst modalRoot = document.getElementById('modal-root');\n\nclass Modal extends React.Component {\n constructor(props) {\n super(props);\n this.el = document.createElement('div');\n }\n\n componentDidMount() {\n // The portal element is inserted in the DOM tree after\n // the Modal's children are mounted, meaning that children\n // will be mounted on a detached DOM node. If a child\n // component requires to be attached to the DOM tree\n // immediately when mounted, for example to measure a\n // DOM node, or uses 'autoFocus' in a descendant, add\n // state to Modal and only render the children when Modal\n // is inserted in the DOM tree.\n modalRoot.appendChild(this.el);\n }\n\n componentWillUnmount() {\n modalRoot.removeChild(this.el);\n }\n\n render() {\n return ReactDOM.createPortal( this.props.children, this.el ); }\n}\n\nclass Parent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {clicks: 0};\n this.handleClick = this.handleClick.bind(this);\n }\n\n handleClick() { // This will fire when the button in Child is clicked, // updating Parent's state, even though button // is not direct descendant in the DOM. this.setState(state => ({ clicks: state.clicks + 1 })); }\n render() {\n return (\n <div onClick={this.handleClick}> <p>Number of clicks: {this.state.clicks}</p>\n <p>\n Open up the browser DevTools\n to observe that the button\n is not a child of the div\n with the onClick handler.\n </p>\n <Modal> <Child /> </Modal> </div>\n );\n }\n}\n\nfunction Child() {\n // The click event on this button will bubble up to parent, // because there is no 'onClick' attribute defined return (\n <div className=\"modal\">\n <button>Click</button> </div>\n );\n}\n\nReactDOM.render(<Parent />, appRoot);Catching an event bubbling up from a portal in a parent component allows the development of more flexible abstractions that are not inherently reliant on portals. For example, if you render a <Modal /> component, the parent can capture its events regardless of whether it’s implemented using portals.