Kotlin JS and react-map-gl

JavaScript
1

Trying to reproduce the following in Kotlin react and i cannot get the module import correct for the life of me…

import MapGL, {NavigationControl} from 'react-map-gl';
const TOKEN = 'your_token';
const navStyle = {
  position: 'absolute',
  top: 0,
  left: 0,
  padding: '10px'
};
export default class Map extends Component {
constructor(props) {
    super(props);
    this.state = {
      viewport: {
        latitude: 37.785164,
        longitude: -100,
        zoom: 2.8,
        bearing: 0,
        pitch: 0,
        width: 500,
        height: 500,
      }
    };
  }
render() {
    const {viewport} = this.state;
return (
      <MapGL
        {...viewport}
        mapStyle="mapbox://styles/mapbox/dark-v9"
        mapboxApiAccessToken={TOKEN}>
        <div className="nav" style={navStyle}>
          <NavigationControl/>
        </div>
      </MapGL>
    );
  }
}

The rest of the react works fine, i just cant figure out how to use @JsModule(“react-map-gl”) and then use the mapping Component… Do i have to write bindings?

Ii have used the Module import successfully, ex:

@JsModule("react-quill")
external val reactQuill: RClass<ReactQuillProps>

and then used it:

        reactQuill {
            attrs {
                value = state.text
                onChange = { handleChange(it) }
                modules = toolBarOptions
            }
        }

when i do the same with this library i get “React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: object.”

Any help would greatly be appreciated… I am at wits end…

2

Hi

I think the problem is the instantiation because you “call” reactQuill with a closure as argument. I suppose the most simple way is to go over the RBuilder.

Maybe (Not tested):
In one file:

@file:JsModule("react-quill")

package ....

@JsName("ReactQuill")
external class ReactQuill : Component<ReactQuillProps,RState>()

external interface ReactQuillProps : RProps {
	var ....
}

In another file:

fun RBuilder.reactQuill(handler: RHandler<ReactQuillProps>) = child(ReactQuill::class, handler)

I think this should work.

3

so the file:JsModule says that the external class will be of that module?

import ReactMapboxGl, { Layer, Feature } from "react-mapbox-gl";

would be

@file:JsModule(react-mapbox-gl")

package ....

@JsName("ReactMapboxGl")
external class ReactMapboxGl : Component<SomeProps,SomeState>()

@JsName("Layer")
external class Layer : Component<SomeProps,SomeState>()

@JsName("Feature")
external class Layer : Component<SomeProps,SomeState>()

again thank you for taking the time, i think Kotlin js, more specifically Kotlin React great, but the documentation is not there

4

Exactly … your are welcome. The documentation about this you can find on https://kotlinlang.org/docs/reference/js-modules.html, but i agree, some documentations are not all together.

Another approach for import would be with commonjs (native):
val flatpickr = kotlinext.js.require("flatpickr")

I use both in my projects.

5

So it turns out it was all in the JSNAME

@file:JsModule("react-map-gl")

package com.timberlist.app.bindings.mapbox

import react.*

@JsName("default")
external val ReactMapboxGl : RClass<ReactMapboxGlProps>

external interface ReactMapboxGlProps : RProps {
    var mapboxApiAccessToken: String
    var mapStyle: String
    var width: Int
    var height: Int
    var latitude: Double
    var longitude: Double
    var zoom: Int
}

and then to use:

    ReactMapboxGl{
        attrs {
            mapboxApiAccessToken = MAPBOX_TOKEN
            mapStyle="mapbox://styles/mapbox/satellite-v9"
            width = 500
            height = 500
            longitude = -79.740979
            latitude = 36.224757
            zoom = 15
        }
    }
6

Built some bindings in this video