DEV Community

Cover image for How to create dynamic forms in react using react-hook-forms.

How to create dynamic forms in react using react-hook-forms.

Vineet Pardhi on March 01, 2021

Hi guys, If you are a React Developer you might know that Creating forms in Reactjs is quite easy, yet you need to adjust your code with a lot of ...
Collapse
 
pozda profile image
Ivan Pozderac

Great article!
I also prefer react-hook-form over every other form library.

I am currently working on dynamic form generation from passed object that has validation included so everything is fully customizable, this is similar approach.

Collapse
 
aqkhana2002 profile image
aqkhana2002

hay wondering have you done any think like where you can select or create your template as well ? what i can see in dynamic forms is just controls and there is no html they are using to at least show for user experience , rather an input may be form up to down or left to rite ..

Collapse
 
pozda profile image
Ivan Pozderac

Hi,

I am currently having some private stuff going on and I really didn't work on that project for quite some time now but I was thinking of providing default template and config file where you can specify which components is which input so you can have custom one if you want, something like:

import customTextInput from './CustomTextInput';
...
inputText: customTextInput,
...

I would, of course, provide documentation on required props for such custom components so they can work seamlessly.

Collapse
 
fmsthird profile image
fmsthird

have you tried Formik?

Collapse
 
pozda profile image
Ivan Pozderac

Yep. I tried react-hook-form after I worked with Formik and I found it to be more simple to use in general. They got me with simplicity of use and minimal re-rendering.

Thread Thread
 
fmsthird profile image
fmsthird

That's interesting. I am a newbie to React, and since then, I am using Formik. I might try react-hook for my next project.

Collapse
 
rahulsolankib profile image
rahulsolankib

Great explanation! Waiting for more such articles

Collapse
 
vineetpardhi profile image
Vineet Pardhi

thanks

Collapse
 
karlkras profile image
Karl Krasnowsky

Lots of good information here... I think. However the code samples are incomplete and disjointed. How does this all become a form? I see no exports/imports, etc, so how these all sync up is a complete mystery.
Do you have a repo that shows this in its entirety?

Collapse
 
rajatpattu profile image
rajatpattu

great article. great teacher

Collapse
 
aqkhana2002 profile image
aqkhana2002

the code is too much short cut, is there any way i can download that sample ? i am very beginner in react and wanted to work on dynamic form.