Recently I was introduced to Reacts' createPortal API, which was nothing short of amazing. Let me share my experiences with it! Being a professional Ember developer, my love towards React has never faded away. React with its' component oriented architecture boosts productivity, ensures stable code and is backed up with strong community. I don't wanna bore you, with this sort of things that you(probably many Web devs) hear in routine. I think, Its' time to get our hands dirty with Portals 🔥 'Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component' Generally, not everyone in the world can understand the definition in the official docs in a single glance!, atleast (jus kidding, Reacts' docs on Portals is more beginner friendly peeps, ) NOT ME! go check it out So i decided to have a practical approach with it: As stated in the definition, Portals provide a way to render children of a react component somewhere else in the DOM, not in the same hierarchy! As soon i realised it, i was ended up with nothing but questions. OMG what about the event bubbling? and many… Being a professional ember developer, i have used , it is an addon probably does the similar work of Portals in Ember. Ember Wormhole I kept digging more about Portals. One thing i explored is its' use-case in . Modal Dialogs I built a modal component with bootstrap(overriding some of bootstrap styles) in react similar to this 👇 React ; ReactDOM ; { onClose = { .props.onClose && .props.onClose(e); }; render() { modal = ( <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle"> Modal title </h5> <button type="button" class="close" > <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body">...</div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" > Close </button> <button type="button" class="btn btn-primary"> Save changes </button> </div> </div> </div> ); (modal); } } //Modal.js import from "react" import from "react-dom" export default . class Modal extends React Component => e this this let < = = > div class "modal fade" id "exampleModalCenter" </ > div return I rendered it as a child to App 👇 React ; Modal ; { onClose = { .props.onClose && .props.onClose(e); }; render() { alignCenter = { : , : , : , : , : , : , : , : }; ( <p style={{ height: "100%", margin: "0" }}> //some random 100 lines </p> <Modal onClose={this.onClose}/> </div> //App.js import from "react" import from "./Modal-Compo" export default . class App extends React Component => e this this let display "flex" alignItems "center" justifyCenter "center" height "200px" overflow "hidden" width "50%" margin "auto" marginTop "10%" return < = > div style {alignCenter} ) } } Atlast rendered the App component in the root element 👇 React ; ReactDOM ; ; ; ; App ; ; { ( <App /> <button type="button" className="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter" > Launch demo modal </button> ); } rootElement = .getElementById( ); ReactDOM.render( //Index.js import from "react" import from "react-dom" import "bootstrap/dist/css/bootstrap.min.css" import "jquery/dist/jquery.min.js" import "bootstrap/dist/js/bootstrap.min.js" import from "./components/App" import "./styles.css" ( ) function WhatAreModals return < = " " }} = > div style {{ height: 100vh className "App" </ > div const document "root" , rootElement); < /> WhatAreModals Finally my prototype was ready 😃 When i clicked the Launch demo modal CTA, this happened (oopsy) 😕 The culprit is the App component styled 'overflow:hidden', as in our case the Modal component is rendered as a child of App whose overflow is hidden, our Modal never shows up 😩 Here is where the life saver Portal comes in 🔥 I just made a tweak in my Modal component and the index.html(created another root element for Modal to be rendered) <div id= > <div id= > //index.html "root" </ > div "modal-root" </ > div //added this Rendered Modal in Portal, changed return statement by implementing createPortal ReactDOM.createPortal(modal, .getElementById( )); //Modal.js document "modal-root" It worked seamlessly, The problem was solved by breaking the Modal component out of the container, out of the hierarchy. But suddenly i got into a confusion, as the hierarchy is broken i doubted whether event bubbling will occur? (I think, Many will question this!). I went on digging deeper 😁 Native DOM Snapshot: React DOM: Finally, i was satisfied seeing this, probably many would be 😌 From the snapshots, we come to know that the hierarchy is unaltered in Reacts' Virtual DOM, so event bubbling will happen with ease. Portals can be widely used when a parent component has an or , but you need the child to visually "break out" of its container. For example, overflow: hidden z-index style dialogs, hovercards, and tooltips. I feel this post would've satisfied you on Reacts' createPortal API, if yes, feel free to share this with your colleague web devs as well.
