React 16 is here, and one of the more interesting additions is ‘Portals’.

Portals let you render a bit of React-controlled DOM outside of the parent component. The React docs explain it nicely, using the example of a modal. It works well for tooltips, too (here’s one I made earlier).

But none of that is very interesting. Let’s do something weird…

Since all a portal does is take an element and append it to some other element, you aren’t limited to sticking it elsewhere in the current document. You can append it to the body in a different document, perhaps a document in an entirely different window.

Below I have a base page (on ze left) that has a counter and a crimson button, and a window (on the right) that’s part of the same React app, and also a forest (in the background).

The fact that the window on the right is the same React app is what you’re supposed to be excited about.