Passing an attribute to a react component

Support
#1

Hello Jmix Support Team,

I am currently working on a project where I need to pass a “src” attribute directly to my CustomRendererComponent so that I can initialize it from my view. Could you please guide me on the best way to implement this functionality?

Here is the project setup for reference
tdraw24 copy.zip (115.8 KB)

Thank you for your help.

Best regards,
Thibaut

#3

Hi!

According to the Vaadin documentation, the following methods need to be defined to be able to pass attributes to a react components:

@NpmPackage(value = "tldraw", version = "latest")
@JsModule("./component/custom-renderer.tsx")
@Tag("custom-renderer-component")
class CustomRendererComponent : ReactAdapterComponent(), HasSize {

    fun getSrc(): String {
        return getState("src", String::class.java)
    }

    fun setSrc(src: String?) {
        setState("src", src)
    }
}

In order to pass a parameter, it must be defined. In your case, I created a srcState in the react component:

        const [src, setSrc] = hooks.useState("src", "initial");

Next, you just need to call the method or set the src attribute value to get the desired result:
image

In this case Jmix has nothing to do with working with react components, as it completely reuses the capabilities of Vaadin. Perhaps you can get more information you are interested in if you contact the Vaadin forum: Vaadin Forum

For example, I found information about passing parameters in this topic: Trying out React components in Flow in Vaadin 24.4 beta1 - Vaadin Forum

Best regards,
Dmitriy