Custom Elements for React

Jack Franklin

At Thread we are moving away from server driven rendering via traditional templating to a JavaScript lead frontend.

This is a big undertaking and one that we have to be able to do incrementally whilst we continue to build new features. That means it's not practical for us to completely drop our server side templates in one fell swoop and that lead to us building a bridge between our React application and our server side templates.

Today we're open sourcing custom-react-elements, a library we've written to make it really easy to use the new Custom Elements v1 spec to mount React components onto a page.

We're using this library to move from purely server side templated HTML to web components in our templates (for us that's Django templates, but swap Django for your backend library of choice):

Before:

<div id="old-django-code">
  <nav>
    <!-- all of the nav code here -->
  </nav>
  <section>
    <!-- all of the other old Django code here -->
  </section>
</div>

After:

<div id="old-django-code">
  <thread-nav-component></thread-nav-component>
  <section>
    <!-- all of the other old Django code here -->
  </section>
</div>

One of the main goals of the library is to not tightly couple the React components to the fact that they are being used within a custom element - you should be able to write React components just like you would normally. We took this approach because ultimately we don't see ourselves using Custom Elements forever, but as a useful bridge into a client-side driven experience.

You can find installation instructions, examples and thorough documentation in the project's README, and please open an issue if you have any problems with the package.