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

"I had a Scala.js application built with Laminar that needed to incorporate React Flow, a React-based library for building node based editors. 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?"

"Solution 1: Creating a React Island 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 required integration of React Flow while minimizing React usage and keeping state in Airstream. The integration challenge splits into three problems: mounting a React subtree inside Laminar, driving React component state from Airstream instead of hooks, and supplying Laminar-rendered children to React components. The chosen approach uses Slinky facades and a React island pattern: create a React root on Laminar mount, store the ReactRoot reference in a Var, render the React app into the node, and unmount and clear the root on Laminar unmount to avoid leaks.

Read at Medium