v1.4.2Published 5 years ago

This package has not had recent updates. Please investigate it's current state before committing to using it in your project.

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.


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>


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>