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

 
232
Kudos
 
232
Kudos

Now read this

The Throttle Project

An intervention for the pace of written content, inspired by The Slow Web. Imagine if we knew when to expect written media to be delivered and consumed. What if we shared a common period of time each week, where we spread the word and... Continue →