How to integrate third-party React components?

[sladiri]

This is a question, I am sure I saw some info on how to do this (maybe Reactive2017 conf?).

How can I use third-party React components with Focal? For example https://github.com/MadRabbit/a-plus-forms.
This works, but is there another way?

<F.div>
      You have clicked this button {count} time(s).
      <Form onSubmit={...}>
        <TextInput name="username" label={<F.span>{count}</F.span>} />
      </Form>
    </F.div>

This fails (as excpected I guess):

<F.div>
      You have clicked this button {count} time(s).
      <Form onSubmit={...}>
        <TextInput name="username" label={count} />
      </Form>
    </F.div>

This shows the first count value, but does not update after first render.

<F.div>
      You have clicked this button {count} time(s).
      <Form onSubmit={...}>
        <TextInput name="username" label={count.get()} />
      </Form>
    </F.div>

[sladiri]

I found the lift function in your tests now, that would be a second way to do it, if you cannot pass an F component. (Example uses inlined lifted component.)

<F.div>
      You have clicked this button {count} time(s).
      <Form onSubmit={...}>
        {lift(TextInput )({ name: "username", label: value })}
      </Form>
    </F.div>

So I guess that is just the way, somehow you have to lift components to accept observables. :)

[blacktaxi]

Hey @sladiri,

lift is the right way to do it if you want to make an existing component accept reactive props. You can also save a lifted version to a variable so you can use it in a more idiomatic React way:

const LiftedTextInput = lift(TextInput)

    <F.div>
      You have clicked this button {count} time(s).
      <Form onSubmit={...}>
        <LiftedTextInput name={'username'} label={value} />
      </Form>
    </F.div>

[sladiri]

Thanks, I was just looking at the readme initially. 👍