Atry/ReactToBindingHtml.scala/com.yang_bo/BindingReactToReact

BindingReactToReact

com.yang_bo.BindingReactToReact

object BindingReactToReact extends ComponentWrapper

A React component backed by a Binding[ReactElement].

Attributes

Example

With the help of BindingReactToReact.Implicits, Binding can be used in a React virtual DOM. The following code create a spinner, which includes a label whose value is automatically updated according to the change of currentNumber:

 import com.thoughtworks.binding.Binding
 import com.thoughtworks.binding.Binding.Var
 import com.yang_bo.BindingReactToReact.Implicits._
 import slinky.web.html._
 def spinner(currentNumber: Var[Int]) = {
   span(
     button(id := "minus", onClick := { e => currentNumber.value -= 1 })(
       "-"
     ),
     // With the help of `BindingReactToReact.Implicits`,
     // a `Binding` block can be used as a React element
     Binding {
       // `.bind` is allowed in the Binding block
       label(currentNumber.bind.toString)
     },
     button(id := "plus", onClick := { e => currentNumber.value += 1 })(
       "+"
     ),
   )
 }

The React virtual DOM tree can be rendered into the html document,

 import slinky.web.ReactDOM
 import slinky.testrenderer.TestRenderer
 import org.scalajs.dom._
 import org.scalajs.dom.raw._
 val currentNumber = Var(50)
 TestRenderer.act { () =>
   ReactDOM.render(spinner(currentNumber), document.body)
 }
 currentNumber.value should be(50)
 document.body.innerHTML should be(
   """<span><button id="minus">-</button><label>50</label><button id="plus">+</button></span>"""
 )

and it can respond to UI events:

 TestRenderer.act { () =>
   document
     .getElementById("minus")
     .dispatchEvent(
       new MouseEvent("click", new MouseEventInit {
         bubbles = true
         cancelable = true
       })
     )
 }
 currentNumber.value should be(49)
 document.body.innerHTML should be(
   """<span><button id="minus">-</button><label>49</label><button id="plus">+</button></span>"""
 )

Source