What are React Portals? Why are they useful? How do you use them? Let’s have some cake.
React Portals can render content outside of our main application
Typical use case: When a parent component has overflow: hidden or z-index style but the child needs to “break out” of its container.
Modal dialogs Hovercards Tooltips Cookie Bars Save to HomeScreen
“ Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
ReactDOM.createPortal Syntax ReactDOM.createPortal(child, container); child
Structure & design can be contained within the component calling it Props & state shared
Document Object Model ↓
Event Bubbling Through Portals Because the portal exists in the React tree, you can use all the same features you’d use in the DOM. Like event bubbling. Trigger a click in the modal, catch it in the component.
Go crazy with the idea and open up a portal in a new window! https://codepen.io/davidgilbertson/ pen/xPVMqp
(don’t do this)