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