meteor-blaze-react-component

Use Blaze templates inside of React.

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);

Re-exporting

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.

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/.