Using external components

[dispalt]

Since #2 has been more of a discussion on children properties, I wanted to file a separate issue to talk about how the best way to use third-party components. I define a third party component as something most likely written in JS/JSX which has a defined react interface. Here's what I've been doing so far.

trait ReactBootstrap extends js.Object {
  def Modal: js.Dynamic = ???
  def Button: js.Dynamic = ???
  def OverlayMixin: js.Dynamic = ???
}

case class Modal(title: String,
    onRequestHide: () => Unit,
    className: js.UndefOr[String] = js.undefined) {
  def toJs: js.Object = {
    val p = lit(
      "title" -> title,
      "className" -> className
    )
    p.updateDynamic("onRequestHide")(onRequestHide)
    p
  }

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

I don't need to mess with the render function or any other internal logic to the component but I want to be able to use it in my components. This seems to work fine.

Thoughts?

[aappddeevv]

That's very cool. If its working well, how are you trying to improve this?

My apologies if I took over that other issue and made it noisy so that the original intent was lost.

It is my belief that part of the interop issues have to do with how the Backend, Props and State are wrapped in scalajs-react. In the above, you are gluing constructor arguments directly into the actual object so you are essentially just using a js API with scala that looks like it is directly manipulating the js constructs using scala methods. This looks like it allows you to use the js react component in scalajs-react. However, depending on what components you define in scalajs-react, this may or may not allow you to get some of the features of component composition e.g. the values on property objects defined in scala typed property objects, in these components.

I'm just thinking through this myself to ensure that the expanding universe of js react components are available to us as seamlessly as possibly because there are alot of goods ones out there.

[japgolly]

The way you're doing it now is (generally) the best way that I can think of for now. It would be nice to reduce some of the verbosity. I was thinking the other day the scala.js pickling lib might offer something but I haven't really thought about it yet.

This highlights an important distinction. There's creating Scala components in React (which is what the library is primarily focussed on so far), and then there's wrapping JS components. JS component support is something I haven't given much attention to yet. By all means do suggest ways to improve this.

Composition of the two types should be fine with the exceptions of property and/or "backend" inheritance, and components just expecting other components to expose functions. I don't think either of those scenarios are desirable anyway. On the other hand if there's some awesome JS React component and it needs something like that.... Well, let's see how it goes. Please keep sharing problem scenarios and ideas.

[dispalt]

Gotcha, thanks so much.

[japgolly]

No worries. Good luck, dude!