Any hint on how to use react-hook-form ?

[frhack]

Any hint on how to use react-hook-form from kotlinjs?

Would be difficult to provide a wrapper ?

thanks

[Scogun]

I implemented my own wrapper. The biggest problem was to emulate spread operator. I solved it this way:

external interface RegisterReturn<T: Element> {
    
    var onChange: FormEventHandler<T>
    
    var onBlur: FocusEventHandler<T>
    
    var ref: Ref<T>
    
    var name: String
}

inline fun <T: Element> DOMAttributes<T>.spread(registry: (Any, dynamic) -> RegisterReturn<Element>) {
    val id = this.asDynamic().id
    if (id == null || id.toString() == "") {
        console.warn("Element must have id value to by able to be registered!")
        return
    }
    
    val result = registry(id.toString(), jso {})
    this.onChange = result.onChange
    this.onBlur = result.onBlur
    this.ref = result.ref
    this.asDynamic().name = result.name
}

Then use it this way:

                 TextField {
                      id = "email"
                      label = ReactNode("E-mail")
                      type = InputType.email
                      variant = FormControlVariant.outlined
                      error = form.formState.errors["email"] != null
                      helperText = ReactNode(form.formState.errors["email"]?.message ?: "")
                      spread(form.register)
                  }

I hope it will help.

[citywalki]

I implemented my own wrapper. The biggest problem was to emulate spread operator. I solved it this way:

external interface RegisterReturn<T: Element> {
    
    var onChange: FormEventHandler<T>
    
    var onBlur: FocusEventHandler<T>
    
    var ref: Ref<T>
    
    var name: String
}

inline fun <T: Element> DOMAttributes<T>.spread(registry: (Any, dynamic) -> RegisterReturn<Element>) {
    val id = this.asDynamic().id
    if (id == null || id.toString() == "") {
        console.warn("Element must have id value to by able to be registered!")
        return
    }
    
    val result = registry(id.toString(), jso {})
    this.onChange = result.onChange
    this.onBlur = result.onBlur
    this.ref = result.ref
    this.asDynamic().name = result.name
}

Then use it this way:

                 TextField {
                      id = "email"
                      label = ReactNode("E-mail")
                      type = InputType.email
                      variant = FormControlVariant.outlined
                      error = form.formState.errors["email"] != null
                      helperText = ReactNode(form.formState.errors["email"]?.message ?: "")
                      spread(form.register)
                  }

I hope it will help.

Can you share your wrapper? I don’t think I have the ability to do it. Can you let me learn it? Please

[turansky]

@iamcyw We already have support "spread operator" for Props You can use following syntax

[citywalki]

@iamcyw We already have support "spread operator" for Props You can use following syntax

Thanks for your help, but this is not the only issue I have. We have plans for react hook form or @tanstack/react-form？ I try to read the code and write wrapper, it's too difficult for me😭

[turansky]

We have plans for react hook form or @tanstack/react-form?

Unfortunately no :( We checked both. They are very TS/JS-oriented. As result - it's hard to provide strict API. MUI form concepts looks more Kotlinish - I used them as base for custom form components.

[citywalki]

We have plans for react hook form or @tanstack/react-form?

Unfortunately no :( We checked both. They are very TS/JS-oriented. As result - it's hard to provide strict API. MUI form concepts looks more Kotlinish - I used them as base for custom form components.

MUI form control is for single input control？So the form submit and validate needs to be custom?

[Scogun]

We have plans for react hook form or @tanstack/react-form?

Unfortunately no :( We checked both. They are very TS/JS-oriented. As result - it's hard to provide strict API. MUI form concepts looks more Kotlinish - I used them as base for custom form components.

Hmm, I spent maybe a half day to implement react-hook-form and yup wrappers. Not for 100% functionality but only for my needs. I guess, I can wrap whole libraries quite fast. Does it make any sense for me to try to contribute?

[citywalki]

@Scogun Of course, I think this is the most needed item now in wrapper

[frhack]

meanwhile, months ago, I developed an implementation similar to the @Scogun one. I'll try to clean up it and share here.