Svelte in React

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

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

Props and Events

You can also pass props and events to this component, just like in a regular React component. Updates to them automatically triggers a rerender of the Svelte component.

All svelte events such as on:click are mapped to camelCase like onClick.

import Input from './Input.svelte?in-react';
import { useState } from 'react'
 
const [value, setValue] = useState("")
 
<Input value={value} onChange={v => setValue(v)} />;

Slots and children

children passed to these components is set as the default slot of the underlying Svelte component

import Layout from './Layout.svelte?in-react';
 
<Layout>
  <h1>Hello world</h1>
</Layout>;

SSR

These components also just work with SSR without any extra configuration required.