Using react components in miso

[pmiddend]

I want to use h5web and also miso, but this thing is react (with no native JS bindings). Can I still use that with Miso somehow?

[Joaquincuevas]

Yes. The usual pattern is to give React its own DOM node that Miso never diffs into, and mount the React tree there yourself. Miso has the hooks for exactly this (“third-party widget initialisation” in the onCreated docs).

1. A tiny JS bundle that exposes mount/unmount (built with Vite/esbuild together with React + h5web):

import { createRoot } from "react-dom/client";
import { App, H5GroveProvider } from "@h5web/app";

const roots = new WeakMap();
window.mountH5Web = (el, props) => {
  const root = createRoot(el);
  roots.set(el, root);
  root.render(
    <H5GroveProvider url={props.url} filepath={props.filepath}>
      <App />
    </H5GroveProvider>
  );
};
window.unmountH5Web = (el) => roots.get(el)?.unmount();

2. In Miso, an empty host element with lifecycle hooks:

data Action = MountH5 DOMRef | UnmountH5 DOMRef

view _ =
  div_ [ onCreatedWith MountH5
       , onBeforeDestroyedWith UnmountH5
       , style_ [("height", "600px")] ]
       []   -- no Miso children: React owns this subtree

update (MountH5 el) = io_ $ do
  win   <- jsg "window"
  props <- toJSVal (object ["url" .= h5Url, "filepath" .= h5File])
  void $ callFunction win "mountH5Web" (el, props)
update (UnmountH5 el) = io_ $ do
  win <- jsg "window"
  void $ callFunction win "unmountH5Web" [el]

Keep the host div_ childless. Miso won’t touch its contents, so React and Miso don’t fight over the DOM.
To pass new props later, call root.render(...) again with the new values (store the root, or add an updateH5Web(el, props) function).
For events coming back from React into Miso, pass a callback created with Miso.FFI.syncCallback1 in props and call it from the React side.

Alternative: wrap the React component as a custom element with @r2wc/react-to-web-component, then render it like any tag with nodeHtml "h5-web" [...] []. This is less glue on the Haskell side, but props are passed as attributes/properties.

If this helps, please mark it as the answer.