Embedding in React

Embedding in React 18

This page is a host React 18 tree. Preactile components are exported with asFunctionComponent / asStatefulComponent / asConduitComponent and mounted with React.createElement into the SSR placeholders below. The host owns createElement. Do not call preactile.preact.render on this page.

See Embedding in Preact for the same demos under host Preact.

Install the host once

import scala.scalajs.js
import preactile.Host

Host.useReact(js.Dynamic.global.React)

class becomes className (and for becomes htmlFor) only for a React host.

Simple: greeting and a stateful counter

Host chrome (span#host-chrome) sits next to Preactile children.

import preactile.*

object Greeting extends Component[String]:
  def render(props: String): VNode =
    E.div(A.id("greeting"), A.`class`("hi"), props)

object ClickCounter extends StatefulComponent[Unit, Int]:
  override def initialState(props: Unit): Int = 0
  def render(props: Unit, state: Int, instance: Instance): VNode =
    E.button(
      A.id("stateful"),
      A.onClick(_ => instance.setState(state + 1)),
      s"state:$state",
    )

Complex: conduit todo

The same todo UI as Conduit Integration, exported with asConduitComponent and rendered by React. Actions are still unsafe + run.

import preactile.host.*

val HostApp = asConduitComponent(TodoDemo.App, _ => ())

What not to do

• Do not pass a Preactile Component.apply VNode to React. It has no $typeof: Symbol.for('react.element').

• Do not call preactile.preact.render after Host.useReact.

• Do not splice a second Preact into a bundle that already has React.