Using a Custom Input Component with RHF

[lexszentmiklosy]

Hey, thanks in advance for all of your help and for an awesome library.

https://codesandbox.io/s/compassionate-firefly-cmjus?file=/src/App.js

I have what I imagine is a pretty standard situation. I am trying to rewrite a basic react form using the useState hook to use RHF. We have a custom component in this form that is a bit of a blackbox, It is very complex and not something in scope to rewrite. It is a table where you can modify multiple values at once and get an array in return. Luckily it has a very simple API where you just give it the value and the setValue functions from the useState hook and it handles the rest. I didn't see any documentation for this scenario and I fiddled a bunch with using getValues/setValues and watch in some combination but I figured I would go to the source for their recommendations!

Please let me know if I can clarify anything.

[bluebill1049]

Hey @lexszentmiklosy i would use Controller for any of the custom components, as long as the component does expose onChange and value.

Take a look at this example: https://github.com/react-hook-form/react-hook-form/blob/master/examples/parseFormatInputValues.tsx

[lexszentmiklosy]

Thanks for the response, I'll give it a shot. Does it matter if the names are specifically onChange and value? What if they are myOnChange and myValue? I didn't mean to mislead by using overloaded terms. Can I just pass them in like the other controller example in the link?

[bluebill1049]

yes you can, but then you need to let the Controller know the "name"

https://react-hook-form.com/api#Controller

onChangeName="whateverYourNamedit"

next major version will support render props so make this more clear and flexible.

[lexszentmiklosy]

Thanks! I was able to get it working with this pattern. It was all right there in the documentation but it wasn't clear until I was pointed there. I missed the onChangeName and valueName props the first time around.

<Controller 
  name='rhf-field' 
  onChangeName='myChangeHandler' 
  valueName='myValue' 
  control={control} 
  as={CustomComponent other={true} custom={false} fields={somethingelse} />

[bluebill1049]

The next version of render prop will make things clearer.

[jovana]

Hi I have a question about these properties:
Using this function and adding the props onChangeName and valueName it gives me warnings on unit tests:

Warning: Unknown event handler property onChangeName. It will be ignored.

Warning: React does not recognize the valueName prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase valuename instead. If you accidentally passed it from a parent component, remove it from the DOM element.

I know it's only a warning, but is there something I can do about this?

Thanks Jovana.

[bluebill1049]

hey @jovana if you want using v6, we have changed all of those to render. https://react-hook-form.com/api#Controller