Hi I am relatively new to Kotlin-React. I try to u...

# react

[Roger Kreienbühl]

Hi
I am relatively new to Kotlin-React. I try to use the react-grid-layout (https://github.com/STRML/react-grid-layout) with Kotlin. Therefore I made the following interface file:

@file:JsModule("react-grid-layout")
@file:JsNonModule

import kotlinext.js.Object
import react.RClass
import react.RProps

@JsName("default")
external val ReactGridLayout: RClass<GridLayoutProps>

external interface GridLayoutProps: RProps {
    var autoSize: Boolean
    var cols: Int
    var calssName: String
    var style: Object
    var draggableHandle: String
    var draggableCancel: String
    var containerPadding: Any
    var rowHeight: Int
    var maxRows: Int
    var layout: Array<IntArray>
    var margin: Array<Int>
    var isDraggable: Boolean
    var isResizable: Boolean
    var isDroppable: Boolean
    var useCSSTransforms: Boolean
    var transformScale: Int
    var verticalCompact: Boolean
    var compactType: String?
    var preventCollision: Boolean
    var droppingItem: Object
    var onLayoutChange: Any
    var onDragStart: Any
    var onDrag: Any
    var onDragStop: Any
    var onResizeStart: Any
    var onResize: Any
    var onResizeStop: Any
    var onDrop: Any
}

When I now try to use this, I only get errors.
What am I doing wrong?

[Grantas33]

what errors do you get?

[Roger Kreienbühl]

I get the following errors and warnings:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.
    in App

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.

The above error occurred in the <App> component:
    in App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit <https://fb.me/react-error-boundaries> to learn more about error boundaries.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.

[Grantas33]

You could try doing val reactGridLayout = require("react-grid-layout") and console.log it to see what it prints

[Roger Kreienbühl]

OK? When I try require("react-grid-layout") I get a Type mismatch
Required Boolean, Found String

[Grantas33]

use the require() function from the kotlin.js library

[Grantas33]

you probably imported the other require function

[Roger Kreienbühl]

when I looked closer on the examples, I found out that they don’t use ReactGridLayout directly, they use it like this:

import RGL, { WidthProvider } from "react-grid-layout";

const ReactGridLayout = WidthProvider(RGL);

How can I achieve this in Kotlin?

[Grantas33]

I believe val reactGridLayout = require("react-grid-layout") as ReactGridLayout should work

[Grantas33]

As for the WidthProvider, @JsName("WidthProvider") on top of the WidthProvider class declaration should do

[Roger Kreienbühl]

OK, will give it a try

[Roger Kreienbühl]

thanks

[Grantas33]

the require(module: String) function is located in kotlinext.js package

[Roger Kreienbühl]

I now have figured out how it works:

val RGL = kotlinext.js.require("react-grid-layout")
val WidthProvider = kotlinext.js.require("react-grid-layout").WidthProvider
val ReactGridLayout: RClass<ReactGridLayoutProps> = WidthProvider(RGL) as RClass<ReactGridLayoutProps>

Thanks for your help :-)