Embedding in Preact

Embedding in host Preact

This page is a host-owned Preact tree (Host.usePreactHost). Preactile components are exported the same way as on the React page and mounted with preact.h into the SSR placeholders below. That is different from preactile.preact.render, which is the owned-app path.

See Embedding in React for the React 18 version.

Install the host once

import scala.scalajs.js
import preactile.Host

Host.usePreactHost(js.Dynamic.global.preact)

Simple: greeting and a stateful counter

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",
    )

This example runs in your browser; enable JavaScript to see it.

Complex: conduit todo

Same todo UI, host Preact as the renderer.

import preactile.host.*

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

This example runs in your browser; enable JavaScript to see it.