Multi-step Form Example using Zustand

[theodorusclarence]

Doing multi-step form is kinda hard, we need to use state management to temporarily store data of each step. It becomes more complex if we have file uploads in the forms.

So, my friend and I decided to attempt creating one. We also add an example of clean file upload using dropzone and lightbox preview.

This site is built using:

• Next.js
• TypeScript
• React Hook Form for form state management, with Yup for validation
• Zustand for storing each step data
• React Leaflet for the map component, layered with google maps

Check the site at https://clarence.link/rhf-stepform
and the GitHub repo at https://github.com/theodorusclarence/rhf-stepform

If you find it useful, a star is appreciated!

And here is the demo:

stepform.example.mp4

[aidrecabrera]

Wtf, I found the perfect solution. Thank you for this. It's really just what I needed! :)

[ddikodroid]

thank you so much!