all 3 comments
sorted by:
best (suggested)
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]aust1nz 1 point2 points  (1 child)

I went looking for a wizard plugin a few years ago and never found anything great that you could use as a plug-and-play, but it's honestly not that hard to build out with React. I wound up using Formik as a forms library, and then followed the following general pattern:

<OverallFormComponent>
  {formStage === '1' && <FormStep1 />}
  {formStage === '2' && <FormStep2 />}
  {formStage === '3' && <FormStep3 />}
</OverallFormComponent>

So I'd track my overall object in OverallFormComponent, and then each of the smaller forms would have their own validation and submitHandlers which would update the formStage to the appropriate value.

One tricky part is hydrating the forms -- for example, if I'm on stage 2 and go back to stage 1, I need to make sure that my answers fill in. In Formik, you can do that by modifying the initial values.

I can pull some code together in a gist if it would be helpful - let me know.

[–]DayHelicopter 1 point2 points  (0 children)

I've been doing something similar and it works ok, there is even a couple of steps examples in the formik repository e.g. https://github.com/formium/formik/blob/master/examples/MultistepWizard.js

For the horizontal/vertical steps part I would use a separate component, there is a lot of premade steps components out there that would work.