Theo's Typesafe CultTTC
Theo's Typesafe Cult•3y ago•
1 reply
variable_name

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',
  });


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)}
/>


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

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);


How to achieve typesafety? I'm also using zod for form schema.
Was this page helpful?