[Tool] Kotin React Prop and State Delegates

JavaScript
1

Hi everyone,
While working on a React Kotlin/JS project I felt the need to not have to type setState{ } and props.item everytime I needed a variable from the props or state. I also didn’t feel like creating two props for just one item because a child needed a getter and a setter function. After a lot a trying I created StateDelegate, StateAsProp, ReadWritePropDelegate and ReadOnlyDelegate classes with their own creation functions. Together, I call them React Prop and State Delegates.
I know not everyone will like having to type even more in small components, but in larger ones it might help.

Using a delegated state inside a component

setState {
    counter = state.counter + 1
}

becomes

counter++

Even better:

setState {
    yourSet = state.yourSet + item
}

becomes

yourSet += item

All you need to do is declare the delegates somewhere in your component like:

var counter by stateDelegateOf(YourState::counter)

If you need to give a childComponent read/write access to an item in your state, normally you’d need to give it a getter and setter prop, so a child might have to call:

props.setItem(props.item + something)

Well, by passing a StateAsProp to a child, the child can simply

var item by propDelegateOf(ChildProps::item)

fun someFunction() {
    item += something
}

Normal props can also be made read-only and accessible without props.x by using the same command:

val otherItem by propDelegateOf(ChildProps::otherItem)

Anyways, if you’d like to check it out, it’s over at: https://github.com/Jolanrensen/Kotlin-React-Prop-and-State-Delegates .
I don’t know how to create a library yet, but for now you can just copy over the file if you like to use it yourself.