React in Svelte

With Sveltris, you can use any React component inside Svelte as if it was a regular Svelte component.

<script>
  import Counter from './Counter?in-svelte';
</script>
 
<Counter />

💡

The React component must be a default export for it to work. If it is not a default export, then you can create another .js file that re-exports the named export as a default export.

export { Counter as default } from './Counter?in-svelte';

Props and Events

Sveltris also accepts all props, and triggers a selective rerender whenever the props update. It also maps all React and custom event handlers (/on(.*)/) to Svelte format, and you can set them using /on:(.*)/ syntax. So if a component has an onSubmit prop, you can set it as on:submit

<script>
  import Input from './Input?in-svelte';
 
  let value = '';
</script>
 
<Input {value} on:change={v => value = v} />

Using hooks Svelte in React