Supporting third party components? about scalajs-react HOT 12 CLOSED

This falls under #8 JS-component interop which is still open.

Currently it's verbose and a little messy because said ticket is still open but it is possible. Here's an example of how it can be done.
https://github.com/japgolly/scalajs-react/blob/master/core/src/main/scala/japgolly/scalajs/react/Addons.scala

from scalajs-react.

Closing as duplicate

from scalajs-react.

Oh forgot to answer you a bit more directly: no, you wouldn't use Scalatags. Those 3rd party components are React components and pure JS React components are represented in scalajs-react as ReactComponentU_ (the U is for unmounted, the _ at the end means its Scala-types are unknown). In the example above we first accept inputs that we know the component needs, turn them into a JS object, feed it to the component and then cast our new JS component to ReactComponentU_.

from scalajs-react.

Ah I see. I do think it's possible to use scalatags for this in 0.12.0 using the createClass/Element/Factory for this but I still need to play around.

Took me a while to realize React.addons was just a binding to JS-land.

    def apply(children: VDom*): ReactComponentU_ = {
      val f = React.addons.CSSTransitionGroup
      f(toJs, js.Array(children: _*)).asInstanceOf[ReactComponentU_]
    }

Thanks.

from scalajs-react.

It's not the direction I'd go in because React components, well they're React components :) They have different properties, need to me mounted and stuff. Where Scalatags is concerned they do integrate, you can put a component in the middle of a Scalatags div for example.

Don't let me stop you playing around though. I was wrong about something once. 😛
I'd love to hear how it goes.

from scalajs-react.

@matthughes did you made any progress either in tags/React way ?

from scalajs-react.

Yeah I got it working with React. I still think I can offer an escape hatch using Scalatags but I have a bit more playing around to do.

Here's an example of two React Bootstrap components. I plan to actually finish mapping all of them this weekend if I have time:

// From my build.sbt
// note the commonJSName matches this object name
// ScalaJSKeys.jsDependencies += "org.webjars" % "react-bootstrap" % "0.11.0" / "react-bootstrap.js" commonJSName "ReactBootstrap" dependsOn "react-with-addons.js"
object ReactBootstrap extends js.Object {
  // This Button *is* the ReactJS component from ReactBootstrap
  def Button: js.Dynamic = ???
  def Panel: js.Dynamic = ???
}

object bootstrap {

  case class Panel(header: js.UndefOr[String] = undefined, footer: js.UndefOr[String] = undefined) {
    def toJs: js.Object = {

      val p = js.Dynamic.literal()
      header.foreach(v => p.updateDynamic("header")(v))
      footer.foreach(v => p.updateDynamic("footer")(v))
      p
    }

    def apply(children: Modifier*): ReactComponentU_ = {
      val f = ReactBootstrap.Panel
      f(toJs, js.Array(children: _*)).asInstanceOf[ReactComponentU_]
    }
  }

  case class Button(size: js.UndefOr[String]) {
    def toJs: js.Object = {

      val p = js.Dynamic.literal()
      size.foreach(v => p.updateDynamic("bsSize")(v))
      p
    }

    def apply(children: Modifier*): ReactComponentU_ = {
      val f = ReactBootstrap.Button
      f(toJs, js.Array(children: _*)).asInstanceOf[ReactComponentU_]
    }
  }
}

div(
  bootstrap.Panel("The Header", "The Footer")(
    div("The Body"),
    bootstrap.Button("Click Me")
  )
)

from scalajs-react.

cool thanks for samples .

from scalajs-react.

@matthughes
If you still working on bootstrap components ,you can stop it right there mate , i am working on them under this project
https://github.com/chandu0101/scalajs-react-components
i converted all bootstrap components with couple of gotchas ( major ones ) ,

React.PropTypes.node is currently mapped as String  - > so cant pass html :( 
React.PropTypes.func - didn't found a way to pass scala method :(

you can see Demo of work here :
http://chandu0101.github.io/scalajs-react-components/demo/

@japgolly
thanks a lot man for creating this library 👍 , now i am loving frontend :)

from scalajs-react.

@chandu0101 Happy to hear it mate! Also I just had at your react bootstrap wrappers, looking good.

from scalajs-react.

@japgolly the example you refer to is "ReactCssTransitionGroup" right?

from scalajs-react.

@slorber Yes, that's the one. Creating a Scala↔JS bridge to the underlying component.

from scalajs-react.