https://github.com/ssssota/svelte-react-snippet

Create svelte snippets with JSX syntax based on react
https://github.com/ssssota/svelte-react-snippet

react svelte

Last synced: 29 days ago
JSON representation

Create svelte snippets with JSX syntax based on react

• Host: GitHub
• URL: https://github.com/ssssota/svelte-react-snippet
• Owner: ssssota
• License: other
• Created: 2024-08-17T13:17:36.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-08-18T07:50:54.000Z (3 months ago)
• Last Synced: 2024-09-29T10:49:26.496Z (about 1 month ago)
• Topics: react, svelte
• Language: TypeScript
• Homepage: https://ssssota.github.io/svelte-react-snippet/
• Size: 23.4 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-react-snippet

You can create svelte snippets with JSX syntax based on react.

This means you can use react components in svelte as snippets.

## Usage

```sh

npm i svelte-react-snippet react

```

tsconfig.json

```jsonc

{

  "compilerOptions": {

    // ...

    "jsx": "react-jsx",

    "jsxImportSource": "react"

  }

}

```

snippet.tsx

```tsx

export const snippet = createSnippet<[string, string]>((title, content) => (

  


    

      
{title()}

    

    
{content()}


     alert('Clicked!\n' + content())}>Click me

  

));

```


App.svelte

```svelte

  import {page} from '$lib';

  let name = $state('react');

{@render page('svelte-react-snippet', `Hello ${name}!`)}

```

→ **[Demo](https://ssssota.github.io/svelte-react-snippet/)**

## License

MIT