v2.0.1Published 3 months ago

blaze-react-component Circle CI MIT License

Use Blaze templates inside of React

Copyright (c) 2016 by Gadi Cohen and released under the MIT license (see LICENSE.txt). Many thanks to all our contributors.


# v2+ is Meteor v3 only.  Use v1 for Meteor 1 and 2.
meteor add gadicc:blaze-react-component


1import React from 'react';
2import Blaze from 'meteor/gadicc:blaze-react-component';
4const App = () => (
5  <div>
6    <Blaze template="itemsList" items={items} />
7  </div>

If you want to use Blaze templates from your app (as opposed to a package), make sure you have the templating package installed (and not, i.e. the static-html package).

Your Blaze template will be rendered into a <span> tag. If needed, you can specify a className attribute, i.e.

1<Blaze template="myTemplate" className="myClass" />

renders to:

1<span class="myClass">myTemplate content</span>


  1. Uncaught Error: No Template["xxx"] exists

If your template xxx exists in a .html file inside your client directory, Meteor won't automatically import it, and you should import it from the same react .js file where you need it, e.g.

1// This file contains <template name="xxx">
2import './xxx.html';
4const App = () => <Blaze template="xxx" />;
  1. Uncaught Error: Target container is not a DOM element.

Import your "main" template file that contains your react render target (e.g. <div id="render-target" />) before any initial render code, i.e.

1// Add this:
2import './main.html';


Provided here for those that want it. Personally I think it's clearer to use the <Blaze /> component directly.

1import React from 'react';
2import Blaze from 'meteor/gadicc:blaze-react-component';
4const atForm = (props) => <Blaze {...props} template="atForm" />;
6export { atForm };        // import { atForm } from 'myPackage';

You can also use a default export if you prefer (and your package has none of it's own exports, and just a single template).

Optional and old Meteor support (no ecmascript)

Blaze package authors, read this.

You might want your package to provide optional React support. To be honest, I feel it's clearer to rather give instructions to use the <Blaze /> component, as that makes it very clear what's going on. However, if you plan to offer native React support in the future, this is a good way to protect your users from future changes:


1api.use('gadicc:blaze-react-component@1.1.0', 'client', { weak: true });
2api.addFiles('somefile.js', 'client');
3api.export('YourReactComponent', 'client');


1YourReactComponent = null;
2if (Package['gadicc:blaze-react-component']) {
3  var blazeToReact = Package['gadicc:blaze-react-component'].blazeToReact;
4  YourReactComponent = blazeToReact('YourBlazeTemplate');

And then, optionally, but for good practice, tell your users to:

1import { YourReactComponent } from 'meteor/yourname:yourpackage';
3// And use it as expected, with attributes just like in Blaze
4const App = () => {
5  <div>
6    <YourReactComponent textArg="foo" blazeArg=bar />
7  </div>