How to: convert react component with multiple properties

[zeskysee]

I had an app layout that look like this, may I know how to convert it to a svelte component so i could passed in the primary header, sidebar & main which is also a sveltify component?

<AppLayout
  header={
    <PrimaryHeader productName="name" />
  }
  sidebar={
    <Sidebar
      open={sidebarOpen}
      onToggle={setSidebarOpen}
      openContent={<div style={{ width: spacing192 }} />}
    />
  }
  main={<Outlet />}
/>

[bfanger]

In pure Svelte you'd write the AppLayout using named slots.

<AppLayout>
  <PrimaryHeader slot="header" productName="name" />
  ...

(And in Svelte 5 you'd use snippet props)

Named slots and snippets are not supported by sveltified React components.

You can pass React elements to sveltified React component as props in a svelte file, but you can't use JSX, so you'd need to write it as:

<script lang="ts">
  import { createElement } from "react"
</script>

<AppLayout header={createElement(PrimaryHeader, { productName: "name" })} 

But I recommend rewriting the AppLayout component to Svelte and using the slots approach

[zeskysee]

Thank you for your quick response