Using react-handsontable via JSComponent

Hi

Once again thanks for providing us with this fantastic tool!

I’m trying to figure out how to use a 3rd party react component, namely handsontable (https://github.com/handsontable/react-handsontable).

I’ve been following the guide interop guide (https://github.com/japgolly/scalajs-react/blob/master/doc/INTEROP.md) and have the following code for a HotTable component:

object HotTable {
  @JSImport("react-handsontable", "HotTable")
  @js.native
  object RawComponent extends js.Object

  @js.native
  trait Props extends js.Object {
    var data: Seq[Seq[String]] = js.native
  }

  def props(data: Seq[Seq[String]]): Props = {
    val p = (new js.Object).asInstanceOf[Props]
    p.data = data
    p
  }

  val component = JsComponent[Props, Children.None, Null](RawComponent)
}

But upon trying to use it:

<.div(HotTable.component(HotTable.props(Seq(Seq("yeah"))))())

I get a js error:

Uncaught TypeError: Cannot read property ‘ctor__Ljapgolly_scalajs_react_CtorType’ of null at $c_Ldrt_client_components_TerminalContentComponent$Backend.render__Ldrt_client_components_TerminalContentComponent$Props__Ldrt_client_components_TerminalContentComponent$State__Ljapgolly_scalajs_react_vdom_TagOf (Generic.scala:13) at TerminalContentComponent.scala:194 at $c_sjsr_AnonFunction1.apply__O__O (AnonFunctions.scala:15) at ViaReactComponent.scala:256 at $c_sjsr_AnonFunction1.apply__O__O (AnonFunctions.scala:15) at Object.<anonymous> (ViaReactComponent.scala:252) at ReactCompositeComponent.js:796 at measureLifeCyclePerf (ReactCompositeComponent.js:75) at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:795) at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822)

At this point I’m a little stuck. Any pointers as to where I’m going wrong would be awesome.

Thanks

[richbirch]

Stop press!

We figured it out after a lot of unpicking. We just needed to change the JSImport line to name the export as the default, ie JSImport.Default:

@JSImport("react-handsontable", JSImport.Default)

Phew. Massive relief. Feels like a whole new world has now opened up to us!

Thanks for the earlier reply Rich

[richbirch]

Fantastic. Hopefully these issues will help guide others to get it working in future.

Have a great New Year!