Atry/ReactToBindingHtml.scala/com.yang_bo/BindingHtmlToReact/Implicits

Implicits

com.yang_bo.BindingHtmlToReact$.Implicits$

object Implicits

Attributes

Source:: BindingHtmlToReact.scala
Graph
Supertypes: class Object
trait Matchable
class Any
Self type: Implicits.type

Members list

Concise view

Implicits

Implicitly convents an html"..." interpolation into a React component.

Attributes

Example:

The following code creates a spinner from the html"..." interpolation provided by com.yang_bo.html:

 import com.thoughtworks.binding.Binding
 import com.thoughtworks.binding.Binding.Var
 import com.yang_bo.html.*
 import org.scalajs.dom.*
 def spinner(currentNumber: Var[Int]) = html"""
   <button
     id="minus"
     onclick=${ (e: Event) => currentNumber.value -= 1 }
   >-</button>
   <label>${currentNumber.bind.toString}</label>
   <button
     id="plus"
     onclick=${ (e: Event) => currentNumber.value += 1 }
   >+</button>
 """

The html"..." interpolation can be then used as a React component with the help of BindingHtmlToReact.Implicits:

 import com.yang_bo.BindingHtmlToReact.Implicits.*
 import slinky.web.html.*
 val currentNumber = Var(50)
 def reactRoot = fieldset(
   legend("I am a React component that contains an  html interpolation"),
   spinner(currentNumber)
 )

Then, the html"..." interpolation can be rendered into the html document,

 import slinky.web.ReactDOM
 import slinky.testrenderer.TestRenderer
 import org.scalajs.dom.document
 TestRenderer.act { () =>
   ReactDOM.render(reactRoot, document.body)
 }
 currentNumber.value should be(50)
 document.body.innerHTML should be(
   """<fieldset><legend>I am a React component that contains an  html interpolation</legend><span>
   <button id="minus">-</button>
   <label>50</label>
   <button id="plus">+</button>
   </span></fieldset>"""
 )

and, the html"..." interpolation can respond to UI events

 document
   .getElementById("minus")
   .asInstanceOf[HTMLButtonElement]
   .onclick(
     new MouseEvent("click", new MouseEventInit {
       bubbles = true
       cancelable = true
     })
   )
 currentNumber.value should be(49)
 document.body.innerHTML should be(
   """<fieldset><legend>I am a React component that contains an  html interpolation</legend><span>
   <button id="minus">-</button>
   <label>49</label>
   <button id="plus">+</button>
   </span></fieldset>"""
 )

Source:

BindingHtmlToReact.scala

Inherited implicits

Attributes

Inherited from:: LowPriorityImplicits1024 (hidden)
Source:: BindingHtmlToReact.scala

Generated with