It would be great if we can use some react compone...

# compose-web

[smallshen]

It would be great if we can use some react component direclly in jetpack compose web, or maybe some tools to generate some "internal" code. There are tons of react libraries, it can help the jetpack compose web ecosystem a lot.

Jetpack compose and react have almost excally same design system
for example
Kotlin Js React Code:

external interface MainHeader : RProps {
    var onRequestLogin: () -> Unit
}

val mainHeader = functionalComponent<MainHeader> { props ->
    var basicInfo: BasicInfo? by useState(null)
    useEffect(Unit) {
        WebMainScope.launch {
            basicInfo = if (LoginService.loggedIn) ApiService.getBasicInfo() else null
        }
    }
    ringHeader {
        attrs {
            spaced = true
        }

        img("Your Image") {}

        ringTray {
            if (LoginService.loggedIn) {
                +"Hello"
                ringDropdown(basicInfo?.username ?: "Fetching...") {
                    attrs {
                        clickMode = true
                    }

                }
            } else {
                ringButton {
                    attrs {
                        primary = true
                        onMouseDown = { props.onRequestLogin() }
                    }

                    +"Login"
                }
            }
        }
    }
}

Jetpack Compose Code:

@Composable
fun MainHeader(onRequestLogin: () -> Unit) {
    var basicInfo by remember { mutableStateOf<BasicInfo?>(null) }
    LunchedEffect(Unit) {
        WebMainScope.launch {
            basicInfo = if (LoginService.loggedIn) ApiService.getBasicInfo() else null
        }
    }

    RingHeader(spaced = true) {
        Image("Your Image")

        RingTray {
            if (LoginService.loggedIn) {
                Text("Hello")
                RingDropDown(basicInfo?.username ?: "Fetching...", clickMode = true)
            } else {
                RingButton(primary = true, onMouseDown = { onRequestLogin() }) {
                    Text("Login")
                }
            }
        }
    }
}

99% similarity

[Akif Abasov [JB]]

https://github.com/JetBrains/compose-jb/tree/master/examples/web-with-react

[smallshen]

I already see those, it is not "directlly" at the moment

[Akif Abasov [JB]]

I think that it’s ok for now to create few wrappers for react components to use them without any special support.

[smallshen]

also it is a pain in kotlin js(nothing relate to compose) is that we need to write wrappers for exsisting js react components before using it.

[Akif Abasov [JB]]

I know… And typing is not always compatible.

[[JB] Shagen]

@smallshen you feedback it very welcome and if you have any practical proposal whatsoever - feel free to submit an issue. Let's investigate.