How to achieve various use-cases

[andrwo]

I really love your idea of this form, but I am unsure if I can achieve the following to see if I can move from react-hook-form.

[Background: I started with formik, but run into performance issues with pages with many fields. I am exploring react-hook-form, but running into this issue: I am generating the form components based on a dynamic schema in the 'render()' part -- but some custom components do not have interface to pass in ref. I am unable to useEffect to allocate the name refs by manual register, because this can't be done in the render() part! ]

I would like to know if your component can do the following:

1. return the values in nested JSON format [ like RHF.getValues ( {nest:true} ); ]
2. allow validators as part of field() e.g.
   {
   getter: xxx
   setter: yyy
   validator: zzzz
   }
3. some existing components have multi-values that can be set and returned, for example have two parts in the component where we can set the currency and value, both of which are supposed to be affect "payment_value":5000 and "payment_currency":"USD". Can this be somehow hooked into formhero?

Thank you so much for your effort so far, it has given me very good ideas!

[cupcakearmy]

Hi there, Thanks for the feedback!

1. I believe it already does? is the form return from the hook what you are looking for? I don't get what the nested: true is doing exactly
2. This is a good idea, I see if I can implement this on the weekend
3. Check this: https://codesandbox.io/embed/formhero-multiple-c0hs5 you can have multiple fields updating the same value. For result check the console in codebox 🙂

[andrwo]

For 1: Please take a look at this fork:

https://codesandbox.io/s/formhero-multiple-xdwle

{
firstname: "",
lastname: "",
abcde: { first: "" }
}

      <input {...field("firstname")} />
      <input {...field("lastname")} />
      <input {...field("abcde.first")} />

You can see that the data input and output to the form is not 'flat', it supports hierarchical notation for sub-objects and arrays. Both formik and react-hook-form supports this format.