Switch branches/tags
Nothing to show
Find file History
Latest commit d1a87e7 Aug 16, 2018



Kotlin wrapper for React library. Major version number of this wrapper matches that of React itself.


  1. npm i @jetbrains/kotlin-react

  2. npm run gen-idea-libs

See the Bintray page for Maven and Gradle installation instructions.

Creating a simple React component with Kotlin

As you might know, the simplest way to define a React component in JavaScript is to write a function. Like this:

import React from 'react';

export function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;

Here's what the roughly equivalent Kotlin code looks like:

package hello

import react.*
import react.dom.*

fun RBuilder.hello(name: String) {
    h1 {
        +"Hello, $name"

RBuilder lets you construct your component's markup using type-safe builders, similarly to JSX.

When writing React code in JavaScript the type annotations for props (via PropTypes) are optional, but in Kotlin they are not.

Here's an example of a component defined using a class with a name property of type String:

package welcome

import react.*
import react.dom.*

interface WelcomeProps: RProps {
    var name: String

class Welcome: RComponent<WelcomeProps, RState>() {
     override fun RBuilder.render() {
        div {
            +"Hello, ${props.name}"

fun RBuilder.welcome(name: String = "John") = child(Welcome::class) {
    attrs.name = name

And here's how we can use this component in another component:

import welcome.*

fun RBuilder.app {

Type-safe inline styles

There is no built-in capability for writing inline styles in a type-safe manner. However, it can be done by adding a dependency on kotlin-css and a simple utility function.

var Tag.style: RuleSet
    get() = error("style cannot be read from props")
    set(value) = jsStyle {
        CSSBuilder().apply(value).declarations.forEach {
            this[it.key] = when (it.value) {
                !is String, !is Number -> it.value.toString()
                else -> it.value
fun Tag.style(handler: RuleSet) {
    style = handler

Using the getDerivedStateFromProps lifecycle method (React 16.3+)

There is currently no proper way to declare static members from Kotlin/JS (see KT-18891), so please do the following instead:

class MyComponent: RComponent<MyComponentProps, MyComponentState>() {
     override fun MyComponentState.init(props: MyComponentProps) {
        // Note: it's MyComponent::class.js, not MyComponent::class 
        MyComponent::class.js.asDynamic().getDerivedStateFromProps = { p: MyComponentProps, s: MyComponentState ->
            console.log(p, s)


Imports.kt contains type definitions for React. The remaining classes (React.kt and others) provide higher-level APIs on top of that definition.