theodorusclarence / rhf-stepform

🦘Step form built using React Hook Form, Yup, Typescript, and Zustand

Home Page:https://rhf-step.thcl.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React-Hook-Form Stepform

All Contributors

rhf-stepform

Code to observe:

Key Points

Each time submitting, data is stored in FormStore

const onSubmit = (data: StepOneData) => {
  setData({ step: 1, data });
  router.push('/form/step-2');
};

The stored data will be used as a default value on revisit

const { stepOne, setData } = useFormStore();

const methods = useForm({
  mode: 'onTouched',
  resolver: yupResolver(stepOneSchema),
  defaultValues: stepOne || {},
});

Upload Form

The tricky part lies in Upload Form. The data that is originally stored by the input is File object, but if we store it in zustand, it will be transformed into regular object. This will cause an error when we invoke the URL.createObjectURL(file) for the FilePreview.

So we need to invoke it while we get the original File, and store the URL as a new property. In that way, we only invoke it once, and just use the blob url for revisit.

const acceptedFilesPreview = acceptedFiles.map(
  (file: FileWithPreview) =>
    Object.assign(file, {
      preview: URL.createObjectURL(file),
    })
);

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Theodorus Clarence

💻

Muhammad Rizqi Tsani

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

About

🦘Step form built using React Hook Form, Yup, Typescript, and Zustand

https://rhf-step.thcl.dev


Languages

Language:TypeScript 94.1%Language:CSS 3.5%Language:JavaScript 2.1%Language:Shell 0.3%