Create svelte snippets with JSX syntax based on react
OTHER License
You can create svelte snippets with JSX syntax based on react. This means you can use react components in svelte as snippets.
npm i svelte-react-snippet react
tsconfig.json
{
"compilerOptions": {
// ...
"jsx": "react-jsx",
"jsxImportSource": "react"
}
}
snippet.tsx
export const snippet = createSnippet<[string, string]>((title, content) => (
<div>
<header>
<h1>{title()}</h1>
</header>
<p>{content()}</p>
<button onClick={() => alert('Clicked!\n' + content())}>Click me</button>
</div>
));
App.svelte
<script lang="ts">
import {page} from '$lib';
let name = $state('react');
</script>
{@render page('svelte-react-snippet', `Hello ${name}!`)}
<input type="text" bind:value={name} />
→ Demo
MIT