# React Theme Components

**URL:** https://meta.discourse.org/t/react-theme-components/131565
**Category:** Development
**Created:** [October 21, 2019, 4:29pm UTC](https://meta.discourse.org/t/react-theme-components/131565 "2019-10-21T16:29:49Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![edL](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/edl/32/139152_2.png) [@edL](https://meta.discourse.org/u/edL)
#### Post date: [October 21, 2019, 4:29pm UTC](https://meta.discourse.org/t/react-theme-components/131565/1 "2019-10-21T16:29:50Z")

</div>

A bit of an odd question, but has anyone tried creating a theme component using React? I’ve seen a couple of sources that make React work with Ember, but I’m not sure if they could be applied within the context of a theme component.  
eg:  
[https://medium.com/front-end-weekly/using-react-components-in-your-ember-app-8f7805d409b0](https://medium.com/front-end-weekly/using-react-components-in-your-ember-app-8f7805d409b0)

[https://github.com/alexlafroscia/ember-react-components](https://github.com/alexlafroscia/ember-react-components)

Use case:  
Client has a fancy brand header written in React which is used across all their web properties. This bar features their hero products, and changes regularly, so it would be nice to be able to move it out to its own repository, and have a single place to update it, rather than having to maintain it in Ember, React etc.

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [October 21, 2019, 5:37pm UTC](https://meta.discourse.org/t/react-theme-components/131565/2 "2019-10-21T17:37:10Z")

</div>

From the link:

> 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

You gotta carefully evaluate if increasing the load time of the forum so much is really worth it for you.

The more common route here, is that the header is written in anything, but compiled to HTML and every downstream project just imports the resulting HTML.

---

<div class="post-metadata">

### Author: ![edL](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/edl/32/139152_2.png) [@edL](https://meta.discourse.org/u/edL)
#### Post date: [October 22, 2019, 8:27am UTC](https://meta.discourse.org/t/react-theme-components/131565/3 "2019-10-22T08:27:30Z")

</div>

Thanks for being the voice of sanity 🙂

Consuming the HTML is a much more reasonable approach. The only rub is that the header has Login/Register links that have to change depending on the user’s logged-in state…

Maybe the trick is to implement the core structure of the header, including the dynamic Login, in Ember, and pull in just the content area that changes often.
