“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.

 Demo

You can try this on JSFiddle:

http://jsfiddle.net/joecritch/fU9Bp/

 Thoughts

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.

 
225
Kudos
 
225
Kudos

Now read this

Responding to Responsive Web Design

This article originally appeared on joecritchley.com ‘Responsive Web Design’ has started to shape the way designers and developers create sites and applications. I’ve often heard it mentioned in meetings with clients; explaining it as a... Continue →