Use a React component in a Svelte 5 component

ReactAdapter.svelte

<script>
  import { createElement } from "react";
  import { createRoot } from "react-dom/client";
  import { onMount, onDestroy } from "svelte";

  let container = $state();
  let reactRoot = $state();

  const { el, children, class: classNames, ...props } = $props();

  onMount(() => {
    reactRoot = createRoot(container);
  });

  $effect(() => {
    reactRoot.render(createElement(el, props, children));
  });

  onDestroy(() => {
    reactRoot?.unmount();
  });
</script>

<div bind:this={container} class={classNames}></div>

Usage

<script>
import ReactAdapter from "$lib/components/ReactAdapter.svelte";
import ReactComponent from "react-library";
</script>

<ReactAdapter
  el={ReactComponent}
  prop1="hello"
  prop2="world"
/>