https://github.com/gadicc/meteor-blaze-react-component
<Blaze template="itemsList" items={items} />
https://github.com/gadicc/meteor-blaze-react-component
Last synced: about 1 year ago
JSON representation
<Blaze template="itemsList" items={items} />
- Host: GitHub
- URL: https://github.com/gadicc/meteor-blaze-react-component
- Owner: gadicc
- License: mit
- Created: 2016-03-21T20:40:15.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2024-03-06T10:50:29.000Z (over 2 years ago)
- Last Synced: 2025-03-28T19:44:43.062Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://atmospherejs.com/gadicc/blaze-react-component
- Size: 76.2 KB
- Stars: 61
- Watchers: 3
- Forks: 13
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# blaze-react-component [](https://circleci.com/gh/gadicc/meteor-blaze-react-component) 
*Use Blaze templates inside of React*
Copyright (c) 2016 by Gadi Cohen and released under the
MIT license (see [LICENSE.txt](./LICENSE.txt)). Many thanks to all our
[contributors](https://github.com/gadicc/meteor-blaze-react-component/graphs/contributors).
## Installation
```
# v2+ is Meteor v3 only. Use v1 for Meteor 1 and 2.
meteor add gadicc:blaze-react-component
```
## Usage
```jsx
import React from 'react';
import Blaze from 'meteor/gadicc:blaze-react-component';
const App = () => (
);
```
**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 `` tag. If needed, you can
specify a `className` attribute, i.e.
```html
```
renders to:
```html
myTemplate content
```
## Troubleshooting
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.
```js
// This file contains
import './xxx.html';
const App = () => ;
```
2. **Uncaught Error: Target container is not a DOM element.**
Import your "main" template file that contains your react render target (e.g. `
`) before any initial render code, i.e.
```js
// Add this:
import './main.html';
Meteor.startup(...);
```
## Re-exporting
Provided here for those that want it. Personally I think it's clearer to
use the `` component directly.
```jsx
import React from 'react';
import Blaze from 'meteor/gadicc:blaze-react-component';
const atForm = (props) => ;
export { 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 ``
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**:
```js
api.use('gadicc:blaze-react-component@1.1.0', 'client', { weak: true });
api.addFiles('somefile.js', 'client');
api.export('YourReactComponent', 'client');
```
**somefile.js**:
```js
YourReactComponent = null;
if (Package['gadicc:blaze-react-component']) {
var blazeToReact = Package['gadicc:blaze-react-component'].blazeToReact;
YourReactComponent = blazeToReact('YourBlazeTemplate');
}
```
And then, optionally, but for good practice, tell your users to:
```jsx
import { YourReactComponent } from 'meteor/yourname:yourpackage';
// And use it as expected, with attributes just like in Blaze
const App = () => {
};
```
## Credits
* Inspired by https://github.com/gwendall/meteor-blaze-to-react/.