Frontend Blocks typescript Advanced

React Hook Form + Zod Integration

Type-safe form with React Hook Form and Zod schema resolver.

typescript

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

const schema = z.object({
  email:  z.string().email(),
  amount: z.number().int().min(1).max(500),
});

type FormData = z.infer<typeof schema>;

export function DonationForm() {
  const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
    resolver: zodResolver(schema),
  });
  const onSubmit = (data: FormData) => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("email")} placeholder="Email (optional)" />
      {errors.email && <p>{errors.email.message}</p>}
    </form>
  );
}