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.