react-hook-form / input

šŸ“‹ Wrapper component for controlled inputs

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

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Question: Proper way of using RHFInput in MaterialUI custom component?

cargallo opened this issue Ā· comments

Proper way of using RHFInput in MaterialUI custom component?

I created a component wich is a wrapper of Material UI Select (not react-select). I want to know the proper way of integrating with RHF and RHFInput. I want to know if there is a better aproach, or if thereĀ“s something that I made here that is unnecesary.

If you submit without selecting an option yup validation should trigger error message in component. But it doesn't clean up if you change the option after that without submitting again.

Here is the code sandbox:

https://codesandbox.io/s/react-hook-form-mui-simple-select-0cl76?fontsize=14&hidenavigation=1&theme=dark

hey @cargallo the proper way will be use custom register. RHFInput is pretty much sugar syntax on top of it, but there are certain things RHFInput does make life easier, eg. if you want to reset default values for MUI, right now it's not easy to do that via their input ref (due to controlled component state live inside their component with animation). I am using custom register at work at the moment.

I think that RHFInput is a game changer compared with other libraries, because it has the potential to hide the complexity of working with the library and also the code of the form stays pretty much simple. Look at the example, it's just working with RHFInput and I like the form syntax. In Formik, for example, to avoid form verbosity with MUI you have to use third party libraries.

@cargallo thanks, I just need to give more time on RHFInput then. At least RHF offer a different solution on the table :)

we are moving RHFInput to the main repo :) in the next major version it will be better integrated with RHF and less props to pass in. thanks for your input here.