How to pass typesafe react-hook-form form object

I'm using react-hook-form to handle update user profile form.

const form = useForm<FormData>({
    resolver: zodResolver(updateProfileSchema),
    defaultValues: {
      firstName: undefined,
      lastName: undefined,
      email: undefined,
      oldPassword: undefined,
      newPassword: undefined,
      imageUrl: undefined,
    },
    mode: 'onSubmit',
  });

const form = useForm<FormData>({
    resolver: zodResolver(updateProfileSchema),
    defaultValues: {
      firstName: undefined,
      lastName: undefined,
      email: undefined,
      oldPassword: undefined,
      newPassword: undefined,
      imageUrl: undefined,
    },
    mode: 'onSubmit',
  });

I'm also using uploadthing for image upload (updating user profile pic), so I've created a custom upload button component and I'm passing to it a form, so I could setValue manually when upload is complete.

<UploadButton
   form={form}
   onUploadComplete={(url: string) => setProfileImageUrl(url)}
/>

<UploadButton
   form={form}
   onUploadComplete={(url: string) => setProfileImageUrl(url)}
/>

Inside UploadButtonProps I've declared form prop as a UseFormReturn type like this

interface UploadButtonProps {
  form: UseFormReturn;
  onUploadComplete: (url: string) => void;
}

interface UploadButtonProps {
  form: UseFormReturn;
  onUploadComplete: (url: string) => void;
}

So, the problem is now when I'm trying to use form to setValue I do not have typesafety.

form.setValue('imageUrl', imageUrl);

form.setValue('imageUrl', imageUrl);

How to achieve typesafety? I'm also using zod for form schema.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

How to pass typesafe react-hook-form form object

Did you find this page helpful?