Kotlin JS and react-map-gl


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) {
    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 (
        <div className="nav" style={navStyle}>

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:

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…



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:


package ....

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.


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

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

would be


package ....

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

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

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


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.


So it turns out it was all in the JSNAME


package com.timberlist.app.bindings.mapbox

import react.*

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:

        attrs {
            mapboxApiAccessToken = MAPBOX_TOKEN
            width = 500
            height = 500
            longitude = -79.740979
            latitude = 36.224757
            zoom = 15


Built some bindings in this video