How to use React-Hook-Form and React-Select Together

Photo by Adi Goldstein on Unsplash

Sometimes when we want to ship any product faster at that time we mainly rely on packages or external apis to ease out. So one of the greatest form components that we use now is react-hook-form and it handles a lot of things for you internally. You need not to append onChange for every input tag we just tag it to a register and it handles everything automatically. So it means lesser code, lesser mess you know. But react-hook-form is an uncontrolled input.

So the problem arises when we are using other packages as well which are controlled input packages(ex.. React-Select, AntD, Material-UI). So at that time we get struck how to proceed further.

Photo by Afif Kusuma on Unsplash

So react-hook-form gives us a wrapper for us which makes it easier to implement with the controlled component i.e., Controller

If we use a Controller then life becomes easy you know.

I can give a small example and clarify it a bit more.

So there are two things which we need to keep in mind is: import Controller from react-hook-form and control from the useForm()

Here is a small snippet and you can understand clearly.

here you can get a clear picture that what I was talking about.

There are a lot of other things as well which you can refer to the docs. Till then Happy Coding…