Seamlessly use React components inside a Svelte app
Supports:
This project was featured at the Svelte London - November 2022 Meetup
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.
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:
<!-- Generated by svelte-preprocess-react -->
<script>
import { sveltify } from "svelte-preprocess-react";
import { createPortal } from "react-dom";
import ReactDOM from "react-dom/client";
import { renderToString } from "react-dom/server";
import YouTube from "react-youtube";
const ReactYouTube = sveltify(
YouTube,
createPortal,
ReactDOM,
renderToString,
);
</script>
<ReactYouTube videoId="AdNJ3fydeao" />
npm install svelte-preprocess-react
Add preprocessReact
to your svelte.config.js:
// svelte.config.js
import preprocessReact from "svelte-preprocess-react/preprocessReact";
export default {
preprocess: preprocessReact(),
};
When using other processors like @sveltejs/vite-plugin-svelte or svelte-preprocess add preprocessReact preprocessor as the last processor:
// svelte.config.js
import { vitePreprocess } from "@sveltejs/kit/vite";
import preprocessReact from "svelte-preprocess-react/preprocessReact";
export default {
preprocess: [vitePreprocess(), preprocessReact()],
};
Extend
Once you've converted a React component to Svelte, you'd want delete that React component, but when other React components depended on that component use reactify
to convert the Svelte component to a React component.
import { reactify } from "svelte-preprocess-react";
import ButtonSvelte from "../components/Button.svelte";
const Button = reactify(ButtonSvelte);
function MyComponent() {
return <Button onClick={() => console.log("clicked")}>Click me</Button>;
}
Extinguish
Using multiple frontend frameworks adds overhead in both User and Developer experience.
- Increased download size
- Slower (each framework boundary adds overhead)
- Context switching, keeping the intricacies of both Svelte and React in your head slows down development
svelte-preprocess-react is a migration tool, it can be used to migrate from or to React, it's not a long term solution.
- reactify() Convert a Svelte component into an React component
- hooks() Using React hooks inside Svelte components
- useStore Using a Svelte Store in a React components
- react-router Migrate from react-router to SvelteKit
- Architecture svelte-preprocess-react's API Design-principles and System architecture