Svelte Preprocess React

Seamlessly use React components inside a Svelte app

Supports:

Nesting (Slot & Children)
Contexts
SSR
Hooks (useStore & hooks)

"Embrace, extend and extinguish"

This preprocessor is intended as temporary solution when migrating an existing large React codebase or when a third-party hasn't yet provided a Svelte adapter.
After you've gradually converted all components to Svelte you can remove this preprocessor from your setup.

Using React inside Svelte components

Embrace

Inside the Svelte template prepend the name of the component with react: prefix.

Instead of <Button>, you'd write <react:Button>

You're also able to use libraries from the react ecosystem, react-youtube for example:

<script>
  import YouTube from "react-youtube";
</script>

<react:YouTube videoId="AdNJ3fydeao" />

The snippet above would be generate:

<script>
  import sveltify from "svelte-preprocess-react/sveltify";
  import { createPortal } from "react-dom";
  import ReactDOM from "react-dom/client";
  import { renderToString } from "react-dom/server";
  import YouTube from "react-youtube";

  const React$YouTube = sveltify(
    YouTube,
    createPortal,
    ReactDOM,
    renderToString
  );
</script>

<React$YouTube videoId="AdNJ3fydeao" />

Setup

npm install svelte-preprocess-react

// svelte.config.js
import preprocessReact from "svelte-preprocess-react/preprocessReact";

export default {
  preprocess: preprocessReact(),
};

When using other processors like svelte-preprocess use:

// svelte.config.js
import preprocess from "svelte-preprocess";
import preprocessReact from "svelte-preprocess-react/preprocessReact";

export default {
  preprocess: preprocessReact({
    preprocess: preprocess({ sourceMap: true }),
  }),
};

svelte-preprocess-react is a markup preprocessor, these run before the script preprocessors, The preprocessor that is passed as an option is applied before running the preprocessReact preprocessor.

Using Svelte inside React components

Extend

Once you've converted a React component to Svelte, you'd want delete that React component, but some if other React components depended on that component you can use reactify to use the new Svelte component as a React component.

import { reactify } from "resvelte-preprocess-react";
import ButtonSvelte from "../components/Button.svelte";

const Button = reactify(ButtonSvelte);

function MyComponent() {
  return <Button onClick={() => console.log("clicked")}>Click me</Button>;
}

Using multiple frameworks is a bad idea

Extinguish

Using multiple frontend frameworks add overhead both in User and Developer experience.

Increased download size
Slower (each framework boundry adds overhead)
Context switching, keeping the intricacies of both Svelte and React in your head slows down development