andremion / kotlin-wrappers

Kotlin wrappers for popular JavaScript libraries

Kotlin Wrappers

This repository hosts a number of Kotlin wrappers for popular JavaScript libraries.

To learn more please refer to the READMEs of individual modules.

Versions with the -compat suffix are built with the kotlin.mpp.enableCompatibilityMetadataVariant=true option enabled. These are required for multiplatform projects that don't use hierarchical project structure.

README	Note	Version
kotlin-actions-toolkit
kotlin-browser
kotlin-cesium
kotlin-css
kotlin-cssom-core
kotlin-csstype	guide
kotlin-electron
kotlin-emotion	guide
kotlin-extensions	archived
kotlin-js
kotlin-mui
kotlin-mui-icons
kotlin-node
kotlin-popper
kotlin-react
kotlin-react-beautiful-dnd
kotlin-react-core
kotlin-react-dom
kotlin-react-dom-legacy
kotlin-react-dom-test-utils
kotlin-react-legacy
kotlin-react-redux
kotlin-react-router
kotlin-react-router-dom
kotlin-react-popper
kotlin-react-select
kotlin-react-use
kotlin-redux
kotlin-remix-run-router
kotlin-ring-ui
kotlin-styled	archived
kotlin-styled-next
kotlin-tanstack-query-core
kotlin-tanstack-react-query
kotlin-tanstack-react-query-devtools
kotlin-tanstack-react-table
kotlin-tanstack-react-virtual
kotlin-tanstack-table-core
kotlin-tanstack-virtual-core
kotlin-typescript
kotlin-web
kotlin-wrappers-bom

Artifacts are published to Maven Central, see the corresponding README files for package coordinates.

All packages require JDK 8 to be installed.

Using In Your Projects

Use the "Kotlin Wrappers BOM" which helps to ensure consistency between the modules and allows you not to think about version compatibility.

Just declare kotlin-wrappers-bom and specify the modules you need:

val kotlinWrappersVersion = "1.0.0-pre.555"

dependencies {
    implementation(enforcedPlatform("org.jetbrains.kotlin-wrappers:kotlin-wrappers-bom:$kotlinWrappersVersion"))
    implementation("org.jetbrains.kotlin-wrappers:kotlin-emotion")
    implementation("org.jetbrains.kotlin-wrappers:kotlin-react")
    implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom")
    implementation("org.jetbrains.kotlin-wrappers:kotlin-tanstack-react-table")
    // other wrappers
}

Or use a helper function:

fun kotlinw(target: String): String =
    "org.jetbrains.kotlin-wrappers:kotlin-$target"

val kotlinWrappersVersion = "1.0.0-pre.555"

dependencies {
    implementation(enforcedPlatform(kotlinw("wrappers-bom:$kotlinWrappersVersion")))
    implementation(kotlinw("emotion"))
    implementation(kotlinw("react"))
    implementation(kotlinw("react-dom"))
    implementation(kotlinw("tanstack-react-table"))
    // other wrappers
}

Make sure that you have mavenCentral() in the list of repositories.

Examples

1. To-do list example

2. Tic-Tac-Toe example

3. A port of "Thinking in React" example

4. An example of using axios to fetch remote data. It also demonstrates how to add typings for an external library.

5. An example of using Quill that shows how to use an external React component.

6. An example of using react-router-dom that shows how to use react-route-dom with hooks API.

7. Building Web Applications with React and Kotlin/JS, a tutorial by JetBrains.

8. A full-stack demo application written in Kotlin for JetBrains Night Moscow 2019.

9. An example of using react-table that shows how to use react-table with hooks API.

10. An example of using Material UI.

11. ByteLegend: an open-source, real-world HTML5 MMORPG game.

Follow these examples to learn how to start developing your React apps with Kotlin. Good luck and have fun! You also can clone my-kotlin-react-sample to see the result directly.

Experimental IR Backend

Please note that React wrappers in particular heavily relied on specific characteristics of the default backend, which might make your current code incompatible with the new IR backend.

React error: "X not a function" in production mode

• Every interface implementing Props or State should be marked as external interface. Otherwise, you will get Uncaught ClassCastException. If you’re implementing these interfaces via a class, you can mark it as @JsExport — however, we suggest evaluating if you could use an external interface instead.
• Every component extending RComponent must be marked with @JsExport. Otherwise, you might run into issues such as TypeError: l.render is not a function (react-dom.production.min.js:182)
• https://youtrack.jetbrains.com/issue/KT-42427, https://youtrack.jetbrains.com/issue/KT-39506

Contributing

Contributions to this project are welcome! Please see the open issues or chat with us on the #react channel in our Slack.