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

 
214
Kudos
 
214
Kudos

Now read this

6 apps for simple living in San Francisco

In San Francisco, it’s pretty easy to conduct your life from the palm of your hand. For three months, I got the chance to live the simple life. Depending on how you look at it, this is either super convenient or excruciatingly lazy; but... Continue →