Sveltris
Piece together any framework with Svelte like Tetris
Introduction
Svelte has amazing DX but smaller ecosystem, so there are often certain libraries that are only available in React. It could also be that you want to use a Svelte library in React.
You could rewrite your entire app in the other framework or just use Sveltris
With sveltris, you can intermix UI primitives like components, and state primitives like hooks between frameworks, without even noticing.
Features
Currently Sveltris only supports React, but might support others soon.
Hooks inside svelte - You can use logic hooks from React inside svelte by just wrapping them in use
. This returns a svelte store that is reactive to the changes to hook state.
<script>
import { useCounter } from 'some-lib';
import { use } from 'sveltris/svelte';
const counter = use(() => useCounter());
</script>
{#if $counter}
{@const { count, increment } = $counter}
<button on:click="{increment}">{count}</button>
{/if}
React components inside svelte - Import react components inside Svelte files with ?in-svelte
query. You can pass props, events etc. to it as if it was a svelte component
<script>
import Counter from './Counter.jsx?in-svelte';
</script>
<Counter />
Svelte components inside React - Import svelte components inside React with ?in-react
query. You can pass props, children, events etc. to it as if it was a React component.
import Counter from './Counter.svelte?in-react';
function App() {
return <Counter />;
}