React Contexts with Kotlin React Wrappers

JavaScript
1

I am using the kotlin react wrappers and just moving to use contexts to hold theme settings in my Muirwik project.

Currently, as far as I can tell, RContext.Consumers have to be used in the render phase (or with an RBuilder), but the actual react contexts can be used in other phases/places.

I was defining styles as:

private object ComplexComponentStyles : StyleSheet("ComplexComponentStyles", isStatic = true) {
    val aStyle by css {
        display = Display.flex
        padding(2.spacingUnits)  /* spacing units should be based on a theme in a context */
    }
}

and then using them in the render

override fun RBuilder.render() {
    styledDiv {
        css(ComplexComponentStyles.aStyle)
    ...

But in order to use my theme properties in the style via a RContext.Consumer I have do move my styles to the render function. The render function will get called multiple times within one “mount cycle” which will redo the styles multiple times.

Maybe this is no problem, and that is what I should just do? i.e.

override fun RBuilder.render() {
    val myStyle = object : StyleSheet("ComplexComponentStyles", isStatic = true) 
    ...use myStyle...
}

Or is there, or should there, be a way to consume a context in an init function or componentDidMound function? If so, how would I go about that?

Thanks for any help.