@merged/react-svelte
v0.0.5
Published
use svelte Components inside react
Downloads
1
Readme
@merged/react-svelte
Yet another way to use Svelte components inside React
This project is heavily inspired by svelte-adapter. Actually, I more or less copied the whole eventhandling / watching idea from svelte-adapter, so credit where credit's due.
Difference to other svelte react adapters
- Typescript!
- Provide the wrapping container as react node instead of a tag name
- Slots!
Limitation
- Slot content (e.g. children) will be wrapped in an extra
<div />
by default (can be configured, see blow)
Basic Example
SvelteComponent.svelte
<script lang="ts">
export let name: string
</script>
<div>
<h1>Hello {name}!</h1>
</div>
ReactComponent.tsx
import React from 'react'
import { Svelte } from '@merged/react-svelte'
import SvelteComponent from './SvelteComponent.svelte'
export const ReactComponent = () => {
return (
<Svelte
component={SvelteComponent}
name="Tester"
/>
)
}
Example with typescript
ReactComponent.tsx
import React from 'react'
import { Svelte } from '@merged/react-svelte'
import SvelteComponent from './SvelteComponent.svelte'
interface SvelteComponentProps {
name: string
}
export const ReactComponent = () => {
return (
<Svelte<SvelteComponentProps>
component={SvelteComponent}
name="Tester"
/>
)
}
Example with events
SvelteComponent.svelte
<script lang="ts">
export let name: string
</script>
<div>
<h1 on:click>Hello {name}!</h1>
</div>
ReactComponent.tsx
import React from 'react'
import { Svelte } from '@merged/react-svelte'
import SvelteComponent from './SvelteComponent.svelte'
export const ReactComponent = () => {
return (
<Svelte
component={SvelteComponent}
name="Tester"
onClick={event => console.log('clicked!', event)}
/>
)
}
Example with slot
SvelteComponent.svelte
<script lang="ts">
export let name: string
</script>
<div>
<h1 on:click>Hello {name}!</h1>
<slot>This is the default slot content</slot>
</div>
ReactComponent.tsx
import React from 'react'
import { Svelte } from '@merged/react-svelte'
import SvelteComponent from './SvelteComponent.svelte'
export const ReactComponent = () => {
return (
<Svelte
component={SvelteComponent}
name="Tester"
onClick={event => console.log('clicked!', event)}
>
This is the new slot content
</Svelte>
)
}
Example with custom container, custom slot and custom slot container
SvelteComponent.svelte
<script lang="ts">
export let name: string
</script>
<div>
<h1 on:click>Hello {name}!</h1>
<slot>This is the default slot content</slot>
<p>Some content</p>
<slot name="footer">This is the default footer slot content</slot>
</div>
ReactComponent.tsx
import React from 'react'
import { Svelte } from '@merged/react-svelte'
import SvelteComponent from './SvelteComponent.svelte'
export const ReactComponent = () => {
return (
<Svelte
component={SvelteComponent}
name="Tester"
onClick={event => console.log('clicked!', event)}
container={<div style={{border: '1px solid red'}} />}
slotFooter={<div>This is the new footer slot content</div>}
createSlotContainer={name => {
if (name === 'footer') {
return document.createElement('span')
}
return document.createElement('div')
}}
>
This is the new slot content
</Svelte>
)
}