Idea/Request: Add global 3rd party extension point to the React object

[dougmartin]

tl/dr: Add an empty bare object called 'x' as a new member of the React object so that 3rd party React tools have a global extension point.

I have a couple of internal tools I use with React that I would like to open source. Both tools use a singleton object that is referenced and/or modified by components.

I know I could create the object in the root component and pass it down as a prop but the child components may modify the object and that violates the idea of props being read-only. It also means that if another person open sources a component which uses either of my tools that the user of the component must create that root object in their app and then wire it up down the component tree.

To keep things clean I would love to have a 3rd party extension space hanging off the React object that I could attach my tool's "globals" to so that all the components would have access to it given that they all share the same React global. My suggestion is just to name it "x" and make it a bare object. The documentation would encourage users to then add their own namespace to the object.

Here are is very simple example that adds a 3rd party global event bus to a blogging app using EventEmitter which could be used both on the server and on the client via Browserify.

In app.js (the root component):

require('react-x-event');

React.x.event.bus.on('createPost', ...)

In react-x-event.js

var events = require('events');
React.x.event = {
  bus: new events.EventEmitter(),
  handle: function (e, event, data) {
    e.preventDefault();
    React.x.event.bus.emit(event, data)
  }
}

In new-post.js (a component view shown at some point by a sub-component of app.js)

createPost: function(e) {
  React.x.event.handle(e, 'createPost', ...)
}

render: function () {
  return <form>
    ...
   <button onClick={this.createPost}>Create</button>
  </form>;
}

Without getting lost in the weeds arguing if a global event bus is a good idea for React you can see in this example that I didn't need to wire up the component tree with the bus to allow the sub-component to send a message.

There is nothing from stopping me or anyone else from just globally patching the React object to add the x member but I think it would be better to have it "blessed" and added to the React code so that there are no conflicts in the future over that member name. I also think having a common name like 'x' will allow 3rd party module names to announce how they work, eg require('react-x-event').

As far as somewhere to put your globals, have you looked into the context variable? It hasn't been finalized but it seems to cover some of what you're asking for. There isn't really a proper add-ons framework right now. So I'd expect you'd need to rely on the consumer to wrap things up with React.withContext(). It is hardly a perfect solution but it's something you can do right now that may transition reasonably well into a supported mechanism down the road.

[gaearon]

I'm not sure this is any better than just putting globals in window. If your components need to communicate via some kind of global bus, you can publish this bus as an npm module and require it from your components. Since it would be a peerDependency of both components, they would share the instance.

[gaearon]

Closing as we won't be doing this.