https://kotlinlang.org logo
Join the conversationJoin Slack
Channels
100daysofcode
100daysofkotlin
100daysofkotlin-2021
advent-of-code
aem
ai
alexa
algeria
algolialibraries
amsterdam
android
android-architecture
android-databinding
android-studio
androidgithubprojects
androidthings
androidx
androidx-xprocessing
anime
anko
announcements
apollo-kotlin
appintro
arabic
argentina
arkenv
arksemdevteam
armenia
arrow
arrow-contributors
arrow-meta
ass
atlanta
atm17
atrium
austin
australia
austria
awesome-kotlin
ballast
bangladesh
barcelona
bayarea
bazel
beepiz-libraries
belgium
berlin
big-data
books
boston
brazil
brikk
budapest
build
build-tools
bulgaria
bydgoszcz
cambodia
canada
carrat
carrat-dev
carrat-feed
chicago
chile
china
chucker
cincinnati-user-group
cli
clikt
cloudfoundry
cn
cobalt
code-coverage
codeforces
codemash-precompiler
codereview
codingame
codingconventions
coimbatore
collaborations
colombia
colorado
communities
competitive-programming
competitivecoding
compiler
compose
compose-android
compose-desktop
compose-hiring
compose-ios
compose-mp
compose-ui-showcase
compose-wear
compose-web
connect-audit-events
corda
cork
coroutines
couchbase
coursera
croatia
cryptography
cscenter-course-2016
cucumber-bdd
cyprus
czech
dagger
data2viz
databinding
datascience
dckotlin
debugging
decompose
decouple
denmark
deprecated
detekt
detekt-hint
dev-core
dfw
docs-revamped
dokka
domain-driven-design
doodle
dsl
dublin
dutch
eap
eclipse
ecuador
edinburgh
education
effective-kotlin
effectivekotlin
emacs
embedded-kotlin
estatik
event21-community-content
events
exposed
failgood
fb-internal-demo
feed
firebase
flow
fluid-libraries
forkhandles
forum
fosdem
fp-in-kotlin
framework-elide
freenode
french
fritz2
fuchsia
functional
funktionale
gamedev
ge-kotlin
general-advice
georgia
geospatial
german-lang
getting-started
github-workflows-kt
glance
godot-kotlin
google-io
gradle
graphic
graphkool
graphql
graphql-kotlin
graviton-browser
greece
grpc
gsoc
gui
hackathons
hacktoberfest
hamburg
hamkrest
helios
helsinki
hexagon
hibernate
hikari-cp
hire-me
hiring
hongkong
hoplite
http4k
hungary
hyderabad
image-processing
india
indonesia
inkremental
intellij
intellij-plugins
intellij-tricks
internships
introduce-yourself
io
ios
iran
israel
istanbulcoders
italian
jackson-kotlin
jadx
japanese
jasync-sql
java-to-kotlin-refactoring
javadevelopers
javafx
javalin
javascript
jdbi
jhipster-kotlin
jobsworldwide
jpa
jshdq
juul-libraries
jvm-ir-backend-feedback
jxadapter
k2-early-adopters
kaal
kafka
kakao
kalasim
kapt
karachi
karg
karlsruhe
kash_shell
kaskade
kbuild
kdbc
kgen-doc-tools
kgraphql
kinta
klaxon
klock
kloudformation
kmdc
kmm-español
kmongo
knbt
knote
koalaql
koans
kobalt
kobweb
kodein
kodex
kohesive
koin
koin-dev
komapper
kondor-json
kong
kontent
kontributors
korau
korean
korge
korim
korio
korlibs
korte
kotest
kotest-contributors
kotless
kotlick
kotlin-asia
kotlin-beam
kotlin-by-example
kotlin-csv
kotlin-data-storage
kotlin-foundation
kotlin-fuel
kotlin-in-action
kotlin-inject
kotlin-latam
kotlin-logging
kotlin-multiplatform-contest
kotlin-mumbai
kotlin-native
kotlin-pakistan
kotlin-plugin
kotlin-pune
kotlin-roadmap
kotlin-samples
kotlin-sap
kotlin-serbia
kotlin-spark
kotlin-szeged
kotlin-website
kotlinacademy
kotlinbot
kotlinconf
kotlindl
kotlinforbeginners
kotlingforbeginners
kotlinlondon
kotlinmad
kotlinprogrammers
kotlinsu
kotlintest
kotlintest-devs
kotlintlv
kotlinultimatechallenge
kotlinx-datetime
kotlinx-files
kotlinx-html
kotrix
kotson
kovenant
kprompt
kraph
krawler
kroto-plus
ksp
ktcc
ktfmt
ktlint
ktor
ktp
kubed
kug-leads
kug-torino
kvision
kweb
lambdaworld_cadiz
lanark
language-evolution
language-proposals
latvia
leakcanary
leedskotlinusergroup
lets-have-fun
libgdx
libkgd
library-development
linkeddata
lithuania
london
losangeles
lottie
love
lychee
macedonia
machinelearningbawas
madrid
malaysia
mathematics
meetkotlin
memes
meta
metro-detroit
mexico
miami
micronaut
minnesota
minutest
mirror
mockk
moko
moldova
monsterpuzzle
montreal
moonbean
morocco
motionlayout
mpapt
mu
multiplatform
mumbai
munich
mvikotlin
mvrx
myndocs-oauth2-server
naming
navigation-architecture-component
nepal
new-mexico
new-zealand
newname
nigeria
nodejs
norway
npm-publish
nyc
oceania
ohio-kotlin-users
oldenburg
oolong
opensource
orbit-mvi
osgi
otpisani
package-search
pakistan
panamá
pattern-matching
pbandk
pdx
peru
philippines
phoenix
pinoy
pocketgitclient
polish
popkorn
portugal
practical-functional-programming
proguard
prozis-android-backup
pyhsikal
python
python-contributors
quasar
random
re
react
reaktive
realm
realworldkotlin
reductor
reduks
redux
redux-kotlin
refactoring-to-kotlin
reflect
refreshversions
reports
result
rethink
revolver
rhein-main
rocksdb
romania
room
rpi-pico
rsocket
russian
russian_feed
russian-kotlinasfirst
rx
rxjava
san-diego
science
scotland
scrcast
scrimage
script
scripting
seattle
serialization
server
sg-user-group
singapore
skia-wasm-interop-temp
skrape-it
slovak
snake
sofl-user-group
southafrica
spacemacs
spain
spanish
speaking
spek
spin
splitties
spotify-mobius
spring
spring-security
squarelibraries
stackoverflow
stacks
stayhungrystayfoolish
stdlib
stlouis
strife-discord-lib
strikt
students
stuttgart
sudan
swagger-gradle-codegen
swarm
sweden
swing
swiss-user-group
switzerland
talking-kotlin
tallinn
tampa
teamcity
tegal
tempe
tensorflow
terminal
test
testing
testtestest
texas
tgbotapi
thailand
tornadofx
touchlab-tools
training
tricity-kotlin-user-group
trójmiasto
truth
tunisia
turkey
turkiye
twitter-feed
uae
udacityindia
uk
ukrainian
uniflow
unkonf
uruguay
utah
uuid
vancouver
vankotlin
vertx
videos
vienna
vietnam
vim
vkug
vuejs
web-mpp
webassembly
webrtc
wimix_sentry
wwdc
zircon
Powered by Linen
react
  • j

    janseevers

    11/08/2017, 12:13 PM
    @agrosner DSL? Which? link please if possible?
    f
    • 2
    • 2
  • d

    davide

    11/08/2017, 11:47 PM
    Hi, I just started to use react+kotlin using create-react-kotlin-app, I have one question: can I use existing module (eg. react-bootstrap) in my project?
    f
    • 2
    • 5
  • d

    david.bilik

    11/19/2017, 2:00 PM
    Hi, I`ve seen this presentation from KotlinConf

    https://youtu.be/FDOECr-sT6U▾

    and I am curious if there is anything available or on the roadmap for react native. Thanks
    h
    • 2
    • 1
  • d

    diegog

    11/22/2017, 6:31 PM
    Is webpack/npm the only way to build a kotlin-react project?
    d
    h
    • 3
    • 3
  • f

    franck

    12/29/2017, 3:29 AM
    Question for you guys, I started playing around with a Kotlin/React app, started with the create-react-kotlin-app tool to generate all the configs. Seems to work perfectly when I do npm run build, but the auto-reload with npm run dev often breaks and I'm getting errors like this one :
    TypeError: Kotlin.defineModule is not a function
    (anonymous function)
    <http://localhost:3000/static/js/bundle.js:29147:10>
    map../components/menu/Menu.css
    <http://localhost:3000/static/js/bundle.js:29149:2>
    Is that something you've seen before ? Thanks
    h
    • 2
    • 2
  • t

    Tristan Caron

    02/07/2018, 10:20 PM
    Hello, I'm trying to use an external library (antd), so I did this:
    @file:JsModule("antd/lib/button")
    package antd.lib.button
    
    import react.RProps
    import react.RState
    import react.React
    import react.ReactElement
    
    @JsName("Button")
    external class ButtonComponent : React.Component<RProps, RState> {
        override fun render(): ReactElement?
    }
    And I try to use through
    package antd.lib.button
    
    import react.RBuilder
    import react.RHandler
    import react.RProps
    
    fun RBuilder.antdButton(handler: RHandler<RProps>) = child(ButtonComponent::class, handler)
    But I get in the console
    reflection.kt?8f80:61 Uncaught TypeError: Cannot read property '$metadata$' of undefined
        at getOrCreateKClass (reflection.kt?8f80:61)
        at getKClass (reflection.kt?8f80:23)
        at antdButton (dsl.kt?502b:11)
        at Home.render_ss14n$ (Home.kt?7b40:13)
        at eval (ReactComponent.kt?fdb7:74)
        at buildElements (RBuilder.kt?4494:73)
        at Home.RComponent.render (ReactComponent.kt?fdb7:74)
        at finishClassComponent (react-dom.development.js?9c26:7873)
        at updateClassComponent (react-dom.development.js?9c26:7850)
        at beginWork (react-dom.development.js?9c26:8225)
    
    react-dom.development.js?9c26:9747 The above error occurred in the <Home> component:
        in Home (created by Route)
        in Route
        in div
        in Router (created by BrowserRouter)
        in BrowserRouter
    Do you know what I am missing?
    f
    • 2
    • 5
  • r

    ryannerd

    02/14/2018, 7:56 AM
    Also in React (non-Kotlin)
    SetState(JSobject, function(){callBack code})
    is as @Filipp Riabchun said the state is batched and asynchronous. Meaning that the state change isn't immediate and in JS React if you need to have some action occur when the state actually changes you include a call back function as the second argument. I'm not sure how Kotlin transpiles the JS for this.
    f
    • 2
    • 1
  • r

    ryannerd

    02/14/2018, 6:03 PM
    Sorry if this has already been asked and answered (documentation is somewhat sparse and scattered for kotlin-react). How do I import into Kotlin and use a JavaScript react library (for example https://react-bootstrap.github.io/)?
    t
    f
    c
    • 4
    • 5
  • c

    chadmorrow

    02/28/2018, 3:42 AM
    Actually that's not quite what I was trying to do. I wanted a class component to simply pass all its children on, but adding some props to pass down as well
    m
    d
    • 3
    • 8
  • c

    chadmorrow

    02/28/2018, 3:45 AM
    Also, what is the difference between the js-externals repo and the kotlin-wrappers repo? They both have ways to use React and i'm not clear which one is supposed to be used for which use case
    a
    b
    +2
    • 5
    • 21
  • n

    neworldlt

    03/06/2018, 5:50 PM
    Friendly ping in case you missed. I made PR to wrappers for React Router: https://github.com/JetBrains/kotlin-wrappers/pull/39
    👏 1
    ☝️ 1
    🎉 2
    d
    • 2
    • 10
  • f

    Filipp Riabchun

    03/13/2018, 3:10 PM
    Sure it's possible to do it step by step. Interop in both directions is quite straightforward. If you're using webpack, you can follow
    kotlin-webpack-plugin
    setup instructions: https://github.com/JetBrains/create-react-kotlin-app/tree/master/packages/kotlin-webpack-plugin Your kotlin module will be available as CommonJS module then
    o
    • 2
    • 3
  • d

    deviant

    03/15/2018, 8:27 PM
    is it possible to use
    kotlinx.serialization
    with
    CRKA
    ?
    l
    • 2
    • 2
  • f

    Filipp Riabchun

    03/21/2018, 8:14 PM
    There are plans for enabling that, but it will involve breaking changes
    c
    • 2
    • 3
  • f

    Filipp Riabchun

    03/21/2018, 8:15 PM
    Basically, the idea is that element won't be appended unless you add
    +
    like with strings
    n
    • 2
    • 4
  • s

    snrostov

    03/22/2018, 11:22 AM
    @Filipp Riabchun This can be done by using component class name instead of builder function name. Example
    +MyComponent(prop1, prop2)
    . There is old prototype here: https://htmlpreview.github.io/?https://raw.githubusercontent.com/snrostov/ui-dsl/master/index.html#hello-widgets
    f
    • 2
    • 1
  • s

    samir

    05/03/2018, 8:09 PM
    Is there a way to avoid the error message when using select tag in render?
    override fun RBuilder.render() {
    		val options = listOf("foo", "bar", "baz")
    		select {
    			attrs.value = "foo"
    			attrs.onChangeFunction = {}
    
    			options.forEach {
    				option {
    					key = it
    					attrs.value = it
    					+it
    				}
    			}
    		}
    	}
    Warning: The value prop supplied to <select> must be a scalar value if multiple is false.
    • 1
    • 1
  • c

    chadmorrow

    05/04/2018, 8:48 PM
    I'm working on a stylesheet using kotlin-styled and kotlin-css-js and I'm trying to convert an existing style but don't quite know how to do it. The style is for a button's hover state and I want to set the color property to be inherit but I don't see a way to do that
    l
    • 2
    • 1
  • s

    samir

    05/08/2018, 7:10 PM
    Can anyone run
    npm run gen-idea-libs
    successfully with
    1.0.8
    ?
    > react-scripts-kotlin gen-idea-libs
    
    fs.js:124
      throw new ERR_INVALID_CALLBACK();
      ^
    
    TypeError [ERR_INVALID_CALLBACK]: Callback must be a function
        at maybeCallback (fs.js:124:9)
        at Object.fs.writeFile (fs.js:1244:14)
        at Object.keys.forEach.name (/Users/sam/IdeaProjects/dl-web-portal/node_modules/@jetbrains/gen-idea-libs/generate.js:46:8)
        at Array.forEach (<anonymous>)
        at generate (/Users/sam/IdeaProjects/dl-web-portal/node_modules/@jetbrains/gen-idea-libs/generate.js:43:25)
        at Object.<anonymous> (/Users/sam/IdeaProjects/dl-web-portal/node_modules/react-scripts-kotlin/scripts/gen-idea-libs.js:20:1)
        at Module._compile (internal/modules/cjs/loader.js:678:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:689:10)
        at Module.load (internal/modules/cjs/loader.js:589:32)
        at tryModuleLoad (internal/modules/cjs/loader.js:528:12)
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! dl-portal@0.1.0 gen-idea-libs: `react-scripts-kotlin gen-idea-libs`
    npm ERR! Exit status 1
    npm ERR! 
    npm ERR! Failed at the dl-portal@0.1.0 gen-idea-libs script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /Users/sam/.npm/_logs/2018-05-08T19_07_25_518Z-debug.log
    
    
    
    
    0 info it worked if it ends with ok
    1 verbose cli [ ‘/usr/local/lib/node_modules/node/bin/node’,
    1 verbose cli   ‘/usr/local/bin/npm’,
    1 verbose cli   ‘run’,
    1 verbose cli   ‘gen-idea-libs’ ]
    2 info using npm@6.0.0
    3 info using node@v10.0.0
    4 verbose run-script [ ‘pregen-idea-libs’, ‘gen-idea-libs’, ‘postgen-idea-libs’ ]
    5 info lifecycle dl-portal@0.1.0~pregen-idea-libs: dl-portal@0.1.0
    6 info lifecycle dl-portal@0.1.0~gen-idea-libs: dl-portal@0.1.0
    7 verbose lifecycle dl-portal@0.1.0~gen-idea-libs: unsafe-perm in lifecycle true
    8 verbose lifecycle dl-portal@0.1.0~gen-idea-libs: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/sam/IdeaProjects/dl-web-portal/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
    9 verbose lifecycle dl-portal@0.1.0~gen-idea-libs: CWD: /Users/sam/IdeaProjects/dl-web-portal
    10 silly lifecycle dl-portal@0.1.0~gen-idea-libs: Args: [ ‘-c’, ‘react-scripts-kotlin gen-idea-libs’ ]
    11 silly lifecycle dl-portal@0.1.0~gen-idea-libs: Returned: code: 1  signal: null
    12 info lifecycle dl-portal@0.1.0~gen-idea-libs: Failed to exec gen-idea-libs script
    13 verbose stack Error: dl-portal@0.1.0 gen-idea-libs: `react-scripts-kotlin gen-idea-libs`
    13 verbose stack Exit status 1
    13 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:283:16)
    13 verbose stack     at EventEmitter.emit (events.js:182:13)
    13 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
    13 verbose stack     at ChildProcess.emit (events.js:182:13)
    13 verbose stack     at maybeClose (internal/child_process.js:947:16)
    13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:236:5)
    14 verbose pkgid dl-portal@0.1.0
    15 verbose cwd /Users/sam/IdeaProjects/dl-web-portal
    16 verbose Darwin 17.5.0
    17 verbose argv “/usr/local/lib/node_modules/node/bin/node” “/usr/local/bin/npm” “run” “gen-idea-libs”
    18 verbose node v10.0.0
    19 verbose npm  v6.0.0
    20 error code ELIFECYCLE
    21 error errno 1
    22 error dl-portal@0.1.0 gen-idea-libs: `react-scripts-kotlin gen-idea-libs`
    22 error Exit status 1
    23 error Failed at the dl-portal@0.1.0 gen-idea-libs script.
    23 error This is probably not a problem with npm. There is likely additional logging output above.
    24 verbose exit [ 1, true ]
    l
    • 2
    • 3
  • s

    samir

    05/16/2018, 6:27 PM
    Have anyone been able to add react-ace to kotlin(CRKA)? https://github.com/securingsincity/react-ace I get
    TypeError: Cannot read property '$metadata$' of undefined
    used ts2kt and added
    @JsName("AceEditor")
    external class AceEditor : Component<AceEditorProps, RState> {
        override fun render(): ReactElement?
    }
    • 1
    • 1
  • c

    chadmorrow

    05/21/2018, 12:35 AM
    The documentation for the styled library says you can call
    StyledComponents.injectGlobal(styles.toString())
    to inject global styles. However, it doesn't specify where you can call that. I've tried calling it from just about every part of my app and can never get it to work. I always get a receiver mismatch error. Could someone help provide a little more context on how this is used?
    b
    f
    • 3
    • 4
  • c

    cfnz

    05/30/2018, 9:24 PM
    OK, simplifying things, have done a create-react-kotlin-app and pasted in my example code (with input instead of styledInput and no css line, just to keep things real basic) after the ticker <p>... and I do get a "for" attribute in my output, however all is not well... The console shows the following warning:
    Warning: Invalid DOM property `for`. Did you mean `htmlFor`?
        in label (created by App)
        in App
    so something still seems a bit wrong, which might be causing my initial issue in more complex code?
  • n

    Nail Gilaziev

    06/18/2018, 6:00 PM
    can’t understand how to convert this jsx example in kotlin
    function WelcomeDialog() {
      return (
        <FancyBorder color="blue">
          <h1 className="Dialog-title">
            Welcome
          </h1>
          <p className="Dialog-message">
            Thank you for visiting our spacecraft!
          </p>
        </FancyBorder>
      );
    }
    from this tutorial https://reactjs.org/docs/composition-vs-inheritance.html
    a
    • 2
    • 2
  • n

    Nail Gilaziev

    06/23/2018, 9:11 AM
    kotlin-fullstack-sample uses classes like
    ReactDOMComponent
    from
    package react.dom
    that now doesn’t exist in this package. These sources are not relevant as I understand because I can’t use this code in newly created app from create-react-kotlin-app tool.
    class Application : ReactDOMComponent<ReactComponentNoProps, ApplicationPageState>() {
        companion object : ReactComponentSpec<Application, ReactComponentNoProps, ApplicationPageState>
    }
    what is the actual way for using this code to achive the same result - calling
    Application{}
    in render function without creating convenient function
    ReactDOM.render(document.getElementById("content")) {
            div {
                Application {}
            }
        }
    • 1
    • 1
  • s

    samir

    06/25/2018, 8:38 PM
    @Nail Gilaziev
    npm i core-js@^2.5.3 ajv-keywords@3.2.0
    n
    • 2
    • 8
  • c

    chadmorrow

    07/02/2018, 3:37 PM
    simplest way would be to add that line into the head of the index.html file located in the public folder of your app.
    n
    • 2
    • 3
  • n

    Nail Gilaziev

    07/16/2018, 12:07 PM
    why work on this plugin suspended? It's seems to be very helpful https://github.com/snrostov/idea-kotlin-react
    a
    h
    • 3
    • 2
  • a

    Alexander Mikhalchenko

    10/11/2018, 5:41 AM
    @m I’m talking only about create-react-kotlin-app tool. The react wrapper itself is totally fine (see also https://github.com/JetBrains/kotlin-wrappers). But if your application is a little bit more complicated than a trivial TODO-list I’d suggest you to eject it from create-react-kotlin-app or use completely custom build script which is a little bit painful right now (well, all JS bundling tool are painful IMO 🙂 ). There are not so many examples of KotlinJS applications with customized build. Most of examples have really basic setup generated by IDE and this is not what we have in real world applications. In the end, building Kotlin to JS is not that simple, but writing a code in Kotlin is WAY easier and fun than in JS (including Kotlin-React apps) 🙂
    👍 1
    g
    • 2
    • 1
  • d

    davide

    10/24/2018, 12:01 AM
    Hi, starting from an app created with create-react-kotlin-app how can add an external Kotlin dependency? For instance I have a KotlinJS project called my-lib and a Kotlin/React project called my-app. How can I use my-lib in my-app? Thanks 🙂
    a
    g
    • 3
    • 3
  • g

    galex

    01/22/2019, 8:49 AM
    Hello, how can I use create-kotlin-react-app with Kotlin Multiplatform? Is there any example?
    f
    • 2
    • 2
Powered by Linen
Title
g

galex

01/22/2019, 8:49 AM
Hello, how can I use create-kotlin-react-app with Kotlin Multiplatform? Is there any example?
f

Foso

01/25/2019, 7:27 PM
Hi, in the web module of my project https://github.com/Foso/Sheasy/tree/develop/web i've used Kotlin React und Multiplatform
g

galex

01/26/2019, 11:25 AM
Thanks!
View count: 2