Using React within Your Svelte Applications

What is this post about?

This blog post is about, how can you inject your React components within your Svelte Application. A couple of reasons for this, but not limited to, are:

• You have a big codebase in React and you want to try a new piece of your Architecture in Svelte without jeopardizing all that you have built over the years
• You want to support a hybrid model so that your ReactJS Developers have time to keep up with Svelte until they finally move over
• You really need to integrate with this amazing ReactJS library and they do not have a Svelte version of it

And as a final note, let me just answer the question that is on the back of your head:

You can do everything that you do in React in Svelte and more!

How can you build Svelte and React Side-by-side?

You will need at least 2 things:

• You need to install react and react-dom React lives on the browser and Svelte compiles on the server, therefore you will need to render your React within Svelte onMount handlers
• To help you with this, I’ve built a nice abstraction and this is how it looks:

<script>
  import Button from "@material-ui/core/Button";
  import ReactAdapter from "./utils/ReactAdapter.svelte";
</script>

<ReactAdapter
  el={Button}
  class="mui-btn"
  children="Hello"
  variant="contained"
  color="primary"
  onClick={() => alert("hello world!")}
/>

<style>
  /**
   * Styling a React Component from within a Svelte Component.
   */
  :global(.mui-btn) {
    margin: 20px;
  }
</style>

As you can see above I’m using the ReactAdapter. That adapter is an abstraction that basically, given a React component, expands all its props into the final rendered React component without you having to care how to inject the React component itself in Svelte.

For the full article, including a deep dive into the implementation of ReactAdapter check this Medium article.

The repo with docs and the code is here at jpinho/svelte-react