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 <CustomCurrencyEntryComponent rootName="payment" onValueChange={} onCurrencyChange={}...> 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.