rich-harris/react-svelte

Use Svelte components inside a React app

react-svelte

Use Svelte components inside React apps.

import { render } from 'react-dom';
import SvelteComponent from 'react-svelte';
import Widget from './Widget.html';

function MyReactApp(props) {
	return (
		<div>
			<p>this is a Svelte component inside a React app:</p>
			<SvelteComponent this={Widget} {...props}/>
		</div>
	)
}

render(<MyReactApp/>, document.querySelector('main'));

Demo here, source code for the demo here.

Why not just compile Svelte components to custom elements?

Because React's support for custom elements is somewhat lacking.

Limitations

This is a fairly basic integration, some things don't currently work and possibly never will:

• the value of this is fixed; changing it after the initial render will have no effect
• you can't use <slot>

License

LIL

react-svelte's Issues

this demo not work on webpack5 module federation

Props do not seem to be passed

I have been trying to just pass props in for hours now, and $$props is never defined. Any tips?

react use svelte web component

svelte

svelte compile custom web components

react use

but i cant handle event

Styles are not applied

Hi.

I downloaded the demo folder and ran npm i && npm run dev and got the error

ERROR in ./src/SvelteThing.html
eact-sveltesrcSvelteThing.svelte.css' in 'C:\projects\svelte\react-svelte\src'
 @ ./src/SvelteThing.html 85:0-68
 @ ./src/main.js
 @ multi ./src/main.js

Also, when trying to incooporate react-svelte into a rather large react project, I get no warning, but styles are not applied. That project uses LESS, but can also digest regular css, so not sure if these problems are related or not.

BTW - What's the status of this project? Being able to use svelte components in a react project would allow for a very nice introduction/evaluation path. I really like Svelte but I think it will be hard for me to sell it as an all-at-once replacemeent for our current FE, so this bridge would really help in that regard.

Thanks in advance, and great work as always @Rich-Harris