React: How to use Zod for data validation in React?

1import { z } from "zod";
2import { useForm } from "react-hook-form";
3import { zodResolver } from "@hookform/resolvers/zod";
4
5// 1. Define schema
6const registerSchema = z.object({
7  name: z.string().min(2, "Minimum 2 characters"),
8  email: z.string().email("Invalid email"),
9  password: z.string().min(8, "Minimum 8 characters"),
10  age: z.number().min(18, "Minimum 18 years"),
11  website: z.string().url("Invalid URL").optional(),
12});
13
14// TypeScript type is inferred automatically!
15type RegisterForm = z.infer<typeof registerSchema>;
16
17// 2. Form with Zod validation
18function RegisterForm() {
19  const {
20    register,
21    handleSubmit,
22    formState: { errors },
23  } = useForm<RegisterForm>({
24    resolver: zodResolver(registerSchema),
25  });
26
27  const onSubmit = async (data: RegisterForm) => {
28    await fetch("/api/register", {
29      method: "POST",
30      body: JSON.stringify(data),
31    });
32  };
33
34  return (
35    <form onSubmit={handleSubmit(onSubmit)}>
36      <input {...register("name")} placeholder="Name" />
37      {errors.name && <span>{errors.name.message}</span>}
38
39      <input {...register("email")} placeholder="Email" />
40      {errors.email && <span>{errors.email.message}</span>}
41
42      <input {...register("password")} type="password" />
43      {errors.password && <span>{errors.password.message}</span>}
44
45      <input {...register("age", { valueAsNumber: true })} type="number" />
46      {errors.age && <span>{errors.age.message}</span>}
47
48      <button type="submit">Register</button>
49    </form>
50  );
51}

1// Chaining validations
2const schema = z.object({
3  password: z.string().min(8).max(100).regex(/[A-Z]/, "Must contain uppercase"),
4  confirm: z.string(),
5}).refine(data => data.password === data.confirm, {
6  message: "Passwords don't match",
7  path: ["confirm"],
8});
9
10// Validating API responses
11const UserSchema = z.object({ id: z.number(), name: z.string() });
12const users = UserSchema.array().parse(apiResponse);