alexlafroscia / ember-react-components

Render React components in Ember
https://alexlafroscia.github.io/ember-react-components
MIT License
52 stars 16 forks source link
ember ember-addon react

ember-react-components

Build Status

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.

Installation

ember install ember-react-components @ember-decorators/babel-transforms

Compatibility

This addon requires Ember CLI 2.15 or higher.

Usage

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:

{{my-react-component name='Alex'}}

That would create a component that renders Hello, Alex.

Options

// ember-cli-build.js
let app = new EmberApp(defaults, {
  'ember-react-components': {
    outputFile: '/assets/react.js'
  }
});

What all is this addon doing?

Is this production ready?

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.

License

This project is licensed under the MIT License.