Simple Component to include Meteor Templates on React Components

IncludeTemplate.coffee

# see https://github.com/reactjs/react-meteor
# and https://github.com/jhartma/meteor-cjsx

@IncludeTemplate = React.createClass

  componentDidMount: () ->
    componentRoot = React.findDOMNode(@)
    parentNode = componentRoot.parentNode
    parentNode.removeChild(componentRoot);
    Blaze.render @props.template, parentNode

  render: (template) ->
    <div />

IncludeTemplate.js

// see https://github.com/reactjs/react-meteor

var IncludeTemplate = React.createClass({
  componentDidMount: function() {
    var componentRoot = React.findDOMNode(this);
    var parentNode = componentRoot.parentNode;
    parentNode.removeChild(componentRoot);
    return Blaze.render(this.props.template, parentNode);
  },
  render: function(template) {
    return (<div />)
  }
});

usage.coffee

# see https://github.com/reactjs/react-meteor
# and https://github.com/jhartma/meteor-cjsx

ReactMeteor.createClass

  templateName: 'NavbarRight'

  getMeteorState: () -> {}

  render: () ->
    <div id="navbar" className="navbar-collapse collapse">
      <ul className="nav navbar-nav navbar-right">
        <li><a href="#">Dashboard</a></li>
        <IncludeTemplate template={Template._loginButtons} />
      </ul>
    </div>

Thanks! Works really nice.

For SSR i propose using a string to identify the template, becaues Template is not defined on the server, i.e.

IncludeBlaze = React.createClass({
    propTypes: {
        template: React.PropTypes.string.isRequired
    },

    componentDidMount() {
        var componentRoot = ReactDOM.findDOMNode(this);
        var parentNode = componentRoot.parentNode;
        // Render the Blaze template on this node
        this.view = Blaze.renderWithData(Template[this.props.template], this.props.data, parentNode, componentRoot);
        parentNode.removeChild(componentRoot);
    },

    componentWillUnmount() {
        // Clean up Blaze view
        Blaze.remove(this.view);
    },

    render() {
        return <div />;
    }
});

Thanks works super well. This is the variant I am using with refs:

IncludeBlaze = React.createClass({

    propTypes: {
         template: React.PropTypes.object.isRequired
     },


    componentDidMount() {

        var componentRoot = ReactDOM.findDOMNode(this.container);
        var parentNode = componentRoot.parentNode;
        // Render the Blaze template on this node
        this.view = Blaze.renderWithData(this.props.template, this.props.data, parentNode, componentRoot);
        parentNode.removeChild(componentRoot);

    },

    componentWillUnmount() {
        // Clean up Blaze view
        Blaze.remove(this.view);
    },

    render() {
        return (
          <span
              ref={(c) => this.container = c}
          />
        );
    }
});


module.exports = IncludeBlaze;