Embedding Laminar Components Inside React: A Scala.js Integration Guide

"My goal was to use React only where absolutely necessary while keeping state management in Airstream, which I find far more intuitive than React hooks. The challenge breaks down into three distinct problems: How do you mount a React component tree inside a Laminar application? How do you manage state for React components using Airstream instead of hooks? How do you pass Laminar components into React components that expect React children?"

"The first step is mounting a React root inside your Laminar DOM tree. The key insight is storing the React root reference so you can properly unmount it when the Laminar element unmounts, preventing memory leaks and zombie React trees. import slinky.web.{ReactDOMClient, ReactRoot}import com.raquo.laminar.api.L.*object ReactIsland { private val rootVar: Var[Option[ReactRoot]] = Var(None) val view = { div( // On mount, create and store a react root element onMountCallback { ctx => rootVar.update { _ => val root = ReactDOMClient.createRoot(ctx.thisNode.ref) root.render(yourReactApp) Some(root) } }, // On unmount, clean up the React component and root reference onUnmountCallback { _ => rootVar.update { case None => None case Some(root) => root.unmount() None } } ) }}"

A Scala.js Laminar application needed React Flow for node-based editors while keeping state in Airstream. Three challenges were identified: mounting a React component tree inside Laminar, managing React component state using Airstream instead of hooks, and passing Laminar components into React components that expect React children. The solutions use Slinky for React facades. Solution 1 creates a React island by creating a React root on Laminar mount, storing the ReactRoot reference in a Var, and unmounting it on Laminar unmount to avoid memory leaks and zombie React trees. Code examples use ReactDOMClient.createRoot and root.unmount().

Read at Medium