React Portals

Bettina Helgenlechner

hallo@bettina.tech

Introduced in React v. 16
Render children into DOM node outside of parent component

render() {
    return ReactDOM.createPortal(
        this.props.children, 
        container
    );
}

render() {
    return this.props.children;
}

Use Cases

Modals/Popups/Dialogs
Tooltips
Render something in another window (CodePen)

When a child needs to visually break out of its container:

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.