Typing custom form components

[RWOverdijk]

I am trying to create my own components since tanstack form is great, but pretty verbose. I'm using it with react native.

I am trying to get one of the following uses.

Preferred:

<FormInput
  name="name"
  label="Business name"
  placeholder="Hat rentals"
  form={form}
  validators={{
    onSubmit: v.pipe(v.string(), v.minLength(3)),
  }}
/>

Alternatively (assuming field.name equals name):

<form.Field name="name" validators={{ onSubmit: v.pipe(v.string(), v.minLength(3)) }}>
  {(field) => (
    <FormInput field={field} label="Business name" placeholder="Festi hats rental" />
  )}
</form.Field>

My biggest issue is with typing. I can't figure out how to properly type form or field. I've looked through the docs and other issues but the closest I could find was #636 and that didn't help me.

Any help or guidance would be appreciated.

[Balastrong]

You may find some hints in #825 and the ReactFormApi type.

We'd like to come out with a supported/recommended way of creating custom components/wrappers at some point, feedback is welcome! :)

[RWOverdijk]

Ah, cool. I see that adds type changes that I do not have yet as well.

It's hard to give feedback at this point then. Also doubt my opinion would be shared by many, since I prefer dx over performance when it comes to forms haha. I'll patiently wait :)

ETA: By the power of any I can do this:

<form.Field
  name="name"
  validators={{ onSubmit: v.pipe(v.string(), v.minLength(2)) }}
>
  {(field) => (
    <FormInput
      label="Business name"
      placeholder="Festi hats rental"
      field={field}
    />
  )}
</form.Field>

Which is good enough for me. I don't really care about the typing inside of the FormInput component enough to worry about this for now. 😄

[Balastrong]

That's great!

You should probably be able to type field as well with something along the lines of ReactFormApi<FormData, ZodValidator>["Field"]