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.
React Portals
By Bettina Helgenlechner
