Skip to content

Mokshit06/sveltris

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 />;
}

About

Piece together any framework with Svelte (like Tetris)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published