Compatibility with react-hook-form library

[c3s4]

I know is not a bug, but I'm trying to use grommet with the react-hook-form library instead of formik. The react-hook-form is increasing its popularity and I think is a good way to manage forms in term of code quality and performance, but grommet seems to not be totally compatible with it.

Anyone tried react-hook-form with grommet? Any suggestion? I'm trying to use the Select component and the forwardRef prop to pass the register function (as needed by react-hook-form), but when I click on the select on browser everything crash, causing a blank page.

Here a codesandbox: https://codesandbox.io/s/grommet-select-not-working-with-react-hook-form-5rjsb

If you click twice on the second Select everything will crash.

[r1yk]

Yep, I've just run into this same issue. Luckily it appears that react-hook-from has a Controller wrapper that claims to address this for arbitrary UI libraries, and you don't use the register function at all:
https://react-hook-form.com/api#Controller

Here's a modified version of your codesandbox that shows react-hook-form Controller working with Grommet's TextInput and Select.
https://codesandbox.io/s/grommet-select-not-working-with-react-hook-form-pkl9l

I'm still working on tweaking the configuration of both the Controller and the grommet inputs to avoid the "A component is changing an uncontrolled input of type text to be controlled" warning. For now, at least it doesn't crash.

EDIT: looks like adding defaultValue="" to the Controller wrapped around the Select takes care of the controlled/uncontrolled issue.

[pedrosimao]

I am also very interested in using with react-hook-form.
It is such a pity that defaultValue prop was completely eliminated.

[ShimiSun]

@pedrosimao Can you share inputs of what are the reasons you'd like to use react-hook-form on top of Grommet Form, I'm trying to see if there are any gaps we can bridge so users wouldn't need an additional dependency.

[pedrosimao]

@ShimiSun react-hook-form fully embraces uncontrolled components. Even though it is possible to use controlled components with it, it would make little to no sense to use the two libraries together if we are forced to use a controller with all Grommet components.
I have done some tests and the good news is that Grommet ref props works fine with react-hook-form register function. But the main limitation is the lack of a defaultValue prop on some Grommet components.

[pedrosimao]

What I would suggest is to add a defaultValue prop to all Grommet components.
Then it would be necessary to add a rule that if value prop is used, defaultValue should not be used (or should be ignored).... Do you think it would be possible ?

[ericsoderberghp]

I think that is the right direction to head, ensuring defaultValue can be used across input components.

[pedrosimao]

@ericsoderberghp good! Do you think it would be a lot of work? I could definitely contribute to this. I just don't know what kind of approval we may need from the Grommet core team.

[ericsoderberghp]

I would recommend trying it out with one component, like TextInput, filing a PR with that for feedback, and proceeding from there.

[pedrosimao]

Thanks for advice. TextInput seems to have defaultValue already, even though if not documented.
I think I will with Checkbox component.

[babbarankit]

I am working on a package for Use React Hook Form with Grommet http://npmjs.com/package/grommet-hook-form
https://github.com/babbarankit/grommet-hook-form
I have done most work offline. Just released TextInput today, will be releasing other items too this week.
Just in case it helpful for others.

[laamia]

Has anyone been able to find a work around for setting the default value on a Grommet Select component while using react-hook-form? I've tried the Controller, but that's not working for me either.

[krishna-404]

Any updates on this by any chance? I am building an app with lots of long forms. This can be really helpful. I went through Formik integration documentation but react-hook-form looks simpler. Thanks!