Atry/ReactToBindingHtml.scala
1.0.1+2-2c8a6dac
API
Generated with
Atry/ReactToBindingHtml.scala/com.yang_bo

com.yang_bo

package com.yang_bo

Members list

Concise view

Type members

Classlikes

object BindingHtmlToReact extends ComponentWrapper

A React component that wraps an html.scala node sequence.

A React component that wraps an html.scala node sequence.

Attributes

See also:

Implicits.bindingSeqToReactElement for using an html.scala literal / interpolation inside a React component.

Source:
BindingHtmlToReact.scala
Graph
Supertypes
class Object
trait Matchable
class Any
Self type
object BindingReactToReact extends ComponentWrapper

A React component backed by a Binding[ReactElement].

A React component backed by a Binding[ReactElement].

Attributes

Example:

With the help of Implicits, com.thoughtworks.binding.Binding can be used as a React element. The following code create a spinner, which includes a label whose value is automatically updated according to 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 component 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:
BindingReactToReact.scala
Graph
Supertypes
class Object
trait Matchable
class Any
Self type
final class HtmlMountPoint(parent: Node & ParentNode, childrenBinding: BindingSeq[Node]) extends MultiMountPoint[Node]

Attributes

Source:
HtmlMountPoint.scala
Graph
Supertypes
trait Binding[Unit]
class Object
trait Matchable
class Any
final class ReactToBindingHtml[WrapperElement <: Element](reactElement: ReactElement, wrapperElement: WrapperElement) extends Binding[WrapperElement]

A Binding.scala element that wraps a React component.

A Binding.scala element that wraps a React component.

Attributes

See also:

ReactToBindingHtml.Implicits.reactElementBindable for using a React component inside a html.scala literal / interpolation.

Companion:
object
Source:
ReactToBindingHtml.scala
Graph
Supertypes
trait Binding[WrapperElement]
trait Watchable[WrapperElement]
class Object
trait Matchable
class Any
object ReactToBindingHtml

Attributes

Companion:
class
Source:
ReactToBindingHtml.scala
Graph
Supertypes
class Object
trait Matchable
class Any
Self type
Generated with