https://github.com/mokshit06/sveltris

Piece together any framework with Svelte (like Tetris)
https://github.com/mokshit06/sveltris

Last synced: 1 day ago
JSON representation

Piece together any framework with Svelte (like Tetris)

• Host: GitHub
• URL: https://github.com/mokshit06/sveltris
• Owner: Mokshit06
• Created: 2023-04-07T09:02:50.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-03-09T04:21:06.000Z (10 months ago)
• Last Synced: 2024-12-17T11:07:04.073Z (9 days ago)
• Language: TypeScript
• Homepage: https://sveltris.vercel.app
• Size: 5.7 MB
• Stars: 183
• Watchers: 3
• Forks: 4
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  

  

  
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.

```html

  import { useCounter } from 'some-lib';

  import { use } from 'sveltris/svelte';

  const counter = use(() => useCounter());

{#if $counter}

  {@const { count, increment } = $counter}

  {count}

{/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

```html

  import Counter from './Counter.jsx?in-svelte';

```

**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.

```jsx

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

function App() {

  return ;

}

```