Mixing Pure React Components with Om Next

Question

Suppose I have access to a pure react.js component via some library:

var MyPureJavaScriptComponent = React.createClass({
  render: function() {
    //...
  }
});

But I wish to use om.next, where React components are constructed via the defui macro:

(defui MyComponent
  Object
  (render [this]
          (div nil "Hello, world!")))

Question: What is the best way to get MyPureJavaScriptComponent into om.next? It would be really nice (aesthetically, at least) if it could be wrapped inside its own call to defui so that MyPureJavaScriptComponent was on the same footing as every other om.next component. Is this possible (and would it be the best way to go about it)?

Answer 1

You can return any React component to render into your Om.next tree, here is one example:

(defui MyComponent
  Object
  (render [this]
    (dom/div nil
      (dom/h1 nil "Hello")
      (js/React.createElement js/MyPureJavaScriptComponent #js {:prop "value"}))))