I couldn't find any info on this, are media queries supported in kotlin-styled?

Heyho, is there a way to set default props in Kotlin React? https://reactjs.org/docs/typechecking-with-proptypes.html#default-prop-values

Hi all! How do I modify such a thing to kotlin:

<ReactPlayer
              config={{
                file: {
                  hlsOptions: {
                    forceHLS: true,
                    debug: false,
                    xhrSetup: function(xhr, url) {
                      if (needsAuth(url)) {
                        xhr.setRequestHeader('Authorization', getToken())
                      }
                    },
                  },
                },
              }}
            />

I saw the things on https://play.kotlinlang.org/hands-on/Building%20Web%20Applications%20with%20React%20and%20Kotlin%20JS/07_Using_Packages_From_NPM but I can't wrap my head around it

How do you cancel coroutines when a (functional) component is unmounted? My first shot. Feels weird 🤔

@Suppress("unused")
fun RBuilder.useCoroutineScope(): CoroutineScope {
    val (scope) = useState { CoroutineScope(GlobalScope.newCoroutineContext(Dispatchers.Unconfined)) }
    useEffectWithCleanup(emptyList()) { { scope.cancel() } }
    return scope
}

In component:

val scope = useCoroutineScope()
scope.launch { … }

What's the difference between these 2?

#1
fun RBuilder.Component(prop1:String, prop2:String) {}

#2
interface ComponentProps: RProps {
  var prop1: String
  var prop2: String
}
val Component = rFunction<ComponentProps>("Component"){}

Has any one attempted to provide wrapper's for

Enzyme

? Before I go down this road?

General question about React and Kotlin: 1. how would you compare current state of

React + Kotlin

vs

React + JS/TS

? 2. Is it worth a hustle to use

React + Kotlin

only because I like

Kotlin

? 3. How mature it is in terms of tools and external libraries compatibility? 4. What are the main disadvantages currently?

I think I found a bug (Not sure) When extending

RComponent

and you

override

methods with arguments that are called from

react

directly (i.e.

componentDidUpdate(prevProps,prevState,snapshot)

or

componentWillReceiveProps(nextProps)

), generated

javascript

code always throws a

ClassCastException

. Lets take a look at

componentWillReceiveProps(next)

. The

IR Compiler

generates

javascript

code similar to this

PaginatedGridComp.prototype.componentWillReceiveProps = function (nextProps) {
  return this.componentWillReceiveProps_17(nextProps instanceof Props_19 ? nextProps : THROW_CCE());
};

Since

react

creates

nextProps

internally, the check

nextProps instanceof Props_19

always fails. Hence it throws

CCE

Is there a work around to this problem? IR Compiler Backend

I'm trying to make an uncontrolled component for a number input with kotlin-react. I need it because I want to format the text input as currency (e.g. 5 becomes "5.00"), and with it being a controlled component, I can't edit the cents very well. When I delete the last "0" the code puts it back and moves my cursor. However, I have no idea how to do an uncontrolled component in Kotlin. Any help or examples of this?

Hi, I am trying to wrap the Rating component of Material UI in my Kotlin Material UI Wrapper project (Muirwik). Have got the basics working, but I am trying to handle the example with custom icons and colors. Custom icons sorted, but how do I handled the custom styles? JS:

const StyledRating = withStyles({
  iconFilled: {
    color: '#ff6d75',
  },
  iconHover: {
    color: '#ff3d47',
  },
})(Rating);

export default function CustomizedRatings() {
  return (
    <div>
    ...
         <StyledRating
          name="customized-color"
          defaultValue={2}
          getLabelText={(value: number) => `${value} Heart${value !== 1 ? 's' : ''}`}
          precision={0.5}
          icon={<FavoriteIcon fontSize="inherit" />}
        />
   ...

How would I use/pass these StyledRatings styles to my component? Kotlin - how do I add the iconFilled prop or style?:

...
    mRating("customized-empty", value, precision = 0.5, onChange = { _, newValue -> valueCustom = newValue },
        icon = mIcon("favorite", fontSize = MIconFontSize.inherit, addAsChild = false, color = MIconColor.inherit) {
            css {
                ???
            }
        }
    )

What's the difference between functionalComponent() and rFunction()?

Hi! Which are the available approaches for adding unit testing facilities into a React app fully written in Kotlin?

Hi folks, I’m currently starting to develop a Admin UI for a Cloud platform I recently created. Any advice for using Kotlin (React) over TypeScript (React). The Framework i wanted to use is Material UI. How mature is Kotlin (React) already? (Which major pain points would I stumble across?)

Hello everyone. I took time off my busy work schedule and came up with some Kotlin wrappers for React Native and other related libraries. I also came up with a cli tool to generate a React Native application with Kotlin. You can check out the projects on My Github, give them some stars and use them for study or research purposes. Maybe someone here can learn a thing or two and also create their own Kotlin wrapper libraries and build/grow this community. NOTE: Everything is experimental but works 🙃 Here are the links to the repositories: 1. Kotlin React Native CLI tool 2. Kotlin Wrapper for React Native Core 3. Kotlin Wrapper for React Native Base 4. Kotlin Wrapper for React Native Navigation 5. Kotlin Wrapper for React Native Async Storage

Hi all, I'm trying to setup the app routes but they don't work. The render is:

override fun RBuilder.render() {
    browserRouter {
        div {
            ul {
                li {
                    routeLink("/") { +"Home" }
                }
                li {
                    routeLink("/test") { +"Test" }
                }
            }

            switch {
                route("/") {
                    h1 {
                        +"Home path"
                    }
                }
                route("/test") {
                    h1 {
                        +"Test path"
                    }
                }
            }
        }
    }
}

What happens: When I start the website, it prints "Home path". The I press "Test" in the menu, the url changes to http://localhost:8080/test but the header still says "Home path". If I then press F5 I have the error "Cannot GET /test". What could be the problem? It seems the same as the tutorial that I'm looking at

I’ve released fluid-react 0.9.8 with support for react-helmet-async (dynamic page metadata).

How do you handle lazy loading? I’m experimenting with various approaches 🤔

Hello. I am having trouble with react state. So basically I am handling a list to show outside of component and updating the state via callback like this.

val (state, setState) = useState(emptyList<Post>())

provider.observePosts { list -> setState(list) }

With this method the ui only updates once, however if I set state like this

setState(list.toList())

it works fine. I am concerning about performance. How should I update my list?

Why JB decided to publish

kotlin-wrappers

artifacts to JB Space and not to Maven Central?

Hello! With kotlin-styled the following

val x by css {
  backgroundImage = require("src/main/resources/image.png")
}

gives an error

Module 'src/main/resources/image.png' not found

Moving file to main/kotlin/... and changing to relative path from the source file dir gives the same "not found" error. Using JsModule gives the same error too. The advice

require("image.png")

doesn't work either. Where should resources be placed, and how to reference them by relative path in kotlin/js react app? Please, help! Google gives only 2-year (and more) old advices which don't help, because kotlin/js seems to have changed much recently.

Hi, how to add simple inline style attribute with kotlin-react? I don't want to generate css classes like it is done with

kotlin-styled

.

I am trying to use the library html-react-parser in my React application that uses IR backend. I got the code from my old project that was not using IR backend, however it seems not to work like before. The error i get in the console says:

Uncaught TypeError: HTMLReactParser is not a function

This is how the module is defined.

@file:JsModule("html-react-parser")
@file:JsNonModule
@file:Suppress("INTERFACE_WITH_SUPERCLASS", "OVERRIDING_FINAL_MEMBER", "RETURN_TYPE_MISMATCH_ON_OVERRIDE", "CONFLICTING_OVERLOADS", "EXTERNAL_DELEGATION")

package libs

import react.ReactElement

external interface HTMLReactParserOptions {
    var htmlparser2: Any? /* ParserOptions & DomHandlerOptions */
        get() = definedExternally
        set(value) = definedExternally
    var library: dynamic
        get() = definedExternally
        set(value) = definedExternally
    var replace: ((domNode: dynamic /* Comment | Element | Node | ProcessingInstruction | Text */) -> dynamic)?
        get() = definedExternally
        set(value) = definedExternally
    var trim: Boolean?
        get() = definedExternally
        set(value) = definedExternally
}

@JsName("HTMLReactParser")
external fun parse(html: String, options: HTMLReactParserOptions = definedExternally): ReactElement

How do I use react native with kotlin

Hi everyone, I was wondering if there was a way to make a generic react component in Kotlin/JS. The following minimal example seems to be working:

interface MyGenericCompProps<T> : RProps

fun <T> myGenericComp() = { props: MyGenericCompProps<T> ->
    buildElement {
        div {
            +"Generic component"
        }
    }
}

val genericCompContainer = functionalComponent<RProps> {
    child(myGenericComp<Any>())
}

But I am not sure if it's a good way to make a component. Do any of you see issues with my example ?

Hello good people, I have been getting

Could not find "kotlinx-extensions" in [~/.local/share/kotlin/daemon]

. I checked the dependencies and I can find dependencies from the space repository. Even

./gradlew dependencies --configuration runtimeClasstimepath

shows the dependency is resolved. What am I missing?

@Sebastian Aigner Any chance we will see

kotlin-wrappers

artifacts for Kotlin 1.5.0 published to Maven Central soon?

Looking for someone from JB to shed some light on this issue:

Currently there are multiple ways of doing the same react stuff in kotlin-react (e.g. rComponent() vs functionalComponent()). My understanding (based on various threads on this in the past) is that this came to be mainly because of the way kreact evolved over the years and more mature APIs surfaced. Have you had any thoughts of cleaning this up with deprecations to reduce confusion for new folks trying kreact out?

I don't know when this happened, but I like that RBuilder is now an interface.

Why was this change introduced? https://github.com/JetBrains/kotlin-wrappers/commit/fdb3bad0ef88566ffb857323630fbd1002613caa#diff-bd3e93f85ad37698fd0a6ac70811de3de7794a05add52da53ae6965f6f00cf52