gistfile1.scala

case class State(color: String)

class Backend($: BackendScope[Unit, State]) {
  
  val ref = Ref[Input]("input")
  
  def onChange(): Unit = {
    changeColor()
  }
  
  def onClick(): Unit = {
    changeColor()
    ref($).get.getDOMNode().value += "hi"
  }
  
  def changeColor(): Unit = {
    val newColor = $.state.color match {
      case "blue" => "red"
      case _ => "blue"
    }
    $.modState(_.copy(color = newColor))
  }
}

val TopLevel = ReactComponentB[Unit]("Top level component")
  .initialState(State("blue"))
  .backend(new Backend(_))
  .render((_, state, backend) =>
    div(
      svg(width := 800, height := 100,
        mcircle.circ(mcircle.Props(state.color, backend.onClick))
      ),
      input(ref := backend.ref, onChange --> backend.onChange)
    )
  )
  .build