Consume React components in Ember
This addon is a proof-of-concept for an approach to rendering React components in Ember. It is almost entirely inspired by a blog post by Sivakumar Kailasam, from which the general idea was borrowed.
ember install ember-react-components @ember-decorators/babel-transforms
This addon requires Ember CLI 2.15 or higher.
This addon provides an ES6 class decorator that allows a React element to be rendered in Ember.
As an example, you can create a component like this:
// app/components/my-react-component.js
import React from 'react';
import WithEmberSupport from 'ember-react-components';
@WithEmberSupport
export default class extends React.Component {
render() {
const { name } = this.props;
return (
<p>Hello, {name}</p>
);
}
}
And render it like this:
That would create a component that renders Hello, Alex
.
outputFile
option importsreact
andreact-dom
into a separate file than/assets/vendor.js
. This is useful if your entire Ember application doesn't requirereact
. The separate file containingreact
andreact-dom
can be imported via a template or initializer.
// ember-cli-build.js
let app = new EmberApp(defaults, {
'ember-react-components': {
outputFile: '/assets/react.js'
}
});
- Provides imports for
react
andreact-dom
- Hooks up a bunch of necessary
babel
transforms - Provides a decorator for creating a thin wrapper around your React components that bridge the gap between the two libraries
It does work, but you should be really careful about including both the Ember and React libraries in your application since that's quite a lot of JavaScript to ship to your users.
This project is licensed under the MIT License.