react-hook-form with zod validation & sonner

What are you most proud of, and what would you do differently next time?

react-hook-form is almost necessary when it comes to building forms. Also, by extracting validation logic using zod, it's easier to write and maintain.

const formSchema = z.object({
    first_name: z.string().min(1, { message: "This field is required" }),
    last_name: z.string().min(1, { message: "This field is required" }),
    email: z
        .string()
        .min(1, { message: "This field is required" })
        .email({ message: "Please enter a valid email address" }),
    query: z.string({ message: "Please select a query type" }),
    message: z.string().min(1, { message: "This field is required" }),
    consant: z
        .boolean()
        .refine((checked) => !!checked, {
            message: "To submit this form, please consant to being contacted",
        }),
});

type FormType = z.infer;

// ...

const { register } = useForm({ resolver: zodResolver(formSchema) });

What challenges did you encounter, and how did you overcome them?

Just read some docs or ask LLMs.