“Portals” in React.js

(Another day, another bit of terminology made up by me.)

“Portals” is a pattern that I’ve recently tried in a React project, which allows a component to control another part of the existing DOM entirely.

It passes a string reference from a component, to match a DOM element’s ID attribute elsewhere. I can imagine this is useful if you don’t want all your apps to be aware of properties, essentially decoupling the component tree from the DOM tree.

This is currently a one-time experiment. It is an extension of the ReactLayeredMixin pattern, which itself renders some DOM to a new element on the page. However, instead of creating a new DOM element, you link to one by passing an ID of an element as a string, and that is used as a document.getElementById(this.props.portal)

It’s actually quite similar to yield[:whatever] in Ruby on Rails views and layouts.

Warning: this will probably only work if you plan to mount the DOM portal before the triggering component.


You can try this on JSFiddle:



If you have any thoughts on this, please tweet me. I’d love to know if you think this is a huge anti-pattern, as I’m actually finding it quite handy.


Now read this

This thing called Mooch

Strobe have just come out of — approximately — a 4-week sprint to produce a very rough social web app. Mooch (trymooch.com) matches its user’s intentions (e.g. play football today, drink a beer tomorrow) with one another, allowing them... Continue →