Ember addon to use React Functional components inside Ember apps.
ember install ember-react-ts
This addon requires Ember CLI 3.20 or higher.
This addon provides a wrapper function 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.tsx
import React from 'react';
import ReactDom from 'react-dom';
import WithEmberSupport from 'ember-react-ts';
export default WithEmberSupport(function MyReactComponent(props) {
const { name, children } = props;
return (
<div>
<p>Hello {name}</p>
{children}
</div>
);
});
And render it like this:
<MyReactComponent @name='Raja' />
That would create a component that renders Hello, Raja
.
You can generate React components using the ember g
command like this:
ember g react-component hello-world
This will create a new React component hello-world.tsx
inside app/components
folder.
In your templates you can use it like
<HelloWord />
outputFile
option imports react
and react-dom
into a separate file than /assets/vendor.js
. This is useful if your entire Ember application doesn't require react
. The separate file containing react
and react-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'
}
});
react
and react-dom
babel
transformsSee the Contributing guide for details.
This project is licensed under the MIT License.