This repository hosts a number of Kotlin wrappers for popular JavaScript libraries.
To learn more please refer to the README
s of individual modules.
Artifacts are published to Maven Central, see the corresponding README files for package coordinates.
Important: versions up to pre.156
were published under org.jetbrains
group ID to kotlin.jetbrains.space, newer versions are being published to Maven Central and the new group ID is org.jetbrains.kotlin-wrappers
. Upon changing the group ID the version number was bumped to pre.200
to signal the breaking change.
All packages require JDK 8 to be installed.
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 = "0.0.1-pre.278-kotlin-1.6.0"
dependencies {
implementation(enforcedPlatform("org.jetbrains.kotlin-wrappers:kotlin-wrappers-bom:${kotlinWrappersVersion}"))
implementation("org.jetbrains.kotlin-wrappers:kotlin-react")
implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom")
implementation("org.jetbrains.kotlin-wrappers:kotlin-react-table")
implementation("org.jetbrains.kotlin-wrappers:kotlin-styled")
// other wrappers
}
Or use a helper function:
fun kotlinw(target: String): String =
"org.jetbrains.kotlin-wrappers:kotlin-$target"
val kotlinWrappersVersion = "0.0.1-pre.278-kotlin-1.6.0"
dependencies {
implementation(enforcedPlatform(kotlinw("wrappers-bom:${kotlinWrappersVersion}")))
implementation(kotlinw("react"))
implementation(kotlinw("react-dom"))
implementation(kotlinw("react-table"))
implementation(kotlinw("styled"))
// other wrappers
}
Make sure that you have mavenCentral()
in the list of repositories.
-
A port of "Thinking in React" example
-
An example of using axios to fetch remote data. It also demonstrates how to add typings for an external library.
-
An example of using Quill that shows how to use an external React component.
-
An example of using react-router-dom that shows how to use react-route-dom with hooks API.
-
Building Web Applications with React and Kotlin/JS, a tutorial by JetBrains.
-
A full-stack demo application written in Kotlin for JetBrains Night Moscow 2019.
-
An example of using react-table that shows how to use react-table with hooks API.
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.
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.
- Every interface implementing
Props
orState
should be marked asexternal
interface. Otherwise, you will getUncaught 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 asTypeError: 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
Contributions to this project are welcome! Please see the open issues or chat with us on the #react channel in our Slack.