blaze-react-component

Use Blaze templates inside of React

Installation

meteor add gadicc:blaze-react-component

Usage

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

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>

Troubleshooting

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';
3
4const App = () => <Blaze template="xxx" />;

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';
3
4Meteor.startup(...);

Re-exporting

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';
3
4const atForm = (props) => <Blaze {...props} template="atForm" />;
5
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:

package.js:

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

somefile.js:

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

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

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

Credits

Inspired by https://github.com/gwendall/meteor-blaze-to-react/.