Kotlin wrapper for React DOM library


Keywords
css, kotlin, kotlin-js, react, react-router-dom, redux, styled-components
License
Apache-2.0
Install
npm install @jetbrains/kotlin-react-dom@16.9.0-pre.91

Documentation

JetBrains team project CI Maven Central Kotlin Slack channel

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.

README Note Version
kotlin-actions-toolkit Maven Central
kotlin-browser Maven Central
kotlin-cesium-engine Maven Central
kotlin-cesium-widgets Maven Central
kotlin-css Maven Central
kotlin-cssom-core Maven Central
kotlin-csstype guide Maven Central
kotlin-electron Maven Central
kotlin-emotion guide Maven Central
kotlin-extensions archived Maven Central
kotlin-js Maven Central
kotlin-mui-material Maven Central
kotlin-mui-base Maven Central
kotlin-mui-icons-material Maven Central
kotlin-mui-lab Maven Central
kotlin-mui-system Maven Central
kotlin-muix-date-pickers Maven Central
kotlin-muix-tree-view Maven Central
kotlin-node Maven Central
kotlin-popper Maven Central
kotlin-react Maven Central
kotlin-react-beautiful-dnd Maven Central
kotlin-react-core Maven Central
kotlin-react-dom Maven Central
kotlin-react-dom-legacy Maven Central
kotlin-react-dom-test-utils Maven Central
kotlin-react-legacy Maven Central
kotlin-react-redux Maven Central
kotlin-react-router Maven Central
kotlin-react-router-dom Maven Central
kotlin-react-popper Maven Central
kotlin-react-select Maven Central
kotlin-react-use Maven Central
kotlin-redux Maven Central
kotlin-remix-run-router Maven Central
kotlin-ring-ui Maven Central
kotlin-styled-next Maven Central
kotlin-tanstack-query-core Maven Central
kotlin-tanstack-react-query Maven Central
kotlin-tanstack-react-query-devtools Maven Central
kotlin-tanstack-react-table Maven Central
kotlin-tanstack-react-virtual Maven Central
kotlin-tanstack-table-core Maven Central
kotlin-tanstack-virtual-core Maven Central
kotlin-typescript Maven Central
kotlin-web Maven Central
kotlin-wrappers-bom Maven Central

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.720"

dependencies {
    implementation(platform("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.720"

dependencies {
    implementation(platform(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!

Contributing

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