Anyone know the current state of 'Embedding React in Ember?'

My company was acquired and we are ‘reskinning’ our app to look like the rest of our new company’s. They have a shared set of React components covering a lot of the basics - buttons, text input ,etc. I’d like to, at least at first, wrap those in Ember components for the initial re-skin.

I saw a couple of projects from 2018-2019 (ember-cli-react, ember-react-components) but haven’t seen anything incorporating embroider or that has been updated in the last few years.

Anyone know of current work/discussion along those lines?

1 Like

@miketervela those projects are the ones I’m aware of, most of us are living in a full Ember world so haven’t had to deal with those types of integrations questions. If/as you work things out, it’d be lovely to see an add-on that supports that type of use-case using Embroider though!

1 Like

Here’s a working example that can use a React component library from Ember:


We’ve just recently started experimenting with this, where we took the approach of bundling React and ReactDOM in with our Ember build and rendering React components directly.

A few commits directly related to that:

If it’s of any interest we also added lazy-loading of an externally hosted react component.

@ef4’s approach looks like it could be a bit cleaner, I’ll have to look into that a bit more. Thanks for sharing the example! :heart:

Thanks @lookingsideways, from reviewing your example I realized that in my example I forgot to unmount at teardown.

And yes, as a general comparison between these styles: any time you find yourself making a new component and reaching for did-insert like this it means you’d be better off making your own modifier. ember-render-modifiers is a compatibility bridge for people who are trying to port classic components to glimmer components. New code probably shouldn’t need it, because you get cleaner results with a well-named modifier that does what you need it to do.


One more comment on the linked Ghost implementation: don’t use app.import here. It’s the reason you had to make that bug fix in the second commit. I commented on Fixed hooks not being usable inside of react components · TryGhost/Admin@a17ff01 · GitHub with the details, but the tl;dr is that ember-auto-import does exactly the right thing with react and react-dom (including dev vs prod switching) if you provide no configuration at all.

Here’s what the correct unmount looks like in a modifier: