☃️

【React】TanStack Formでzodを使う時zod-form-adapterが不要になってた(2025年1月時点)

2025/01/11に公開

概要

TanStack Formでzodを使う時に、zod-form-adapterをadapterに設定する必要がありましたが、いつの間にか以下のキャプチャーにある通りdeprecatedになってました。基本的にはadapterを削除すれば良いのですが、念のため実装をメモ書きしておきます。

前提

  • 使用したtanstack/react-formのバージョンは0.41.0です。
  • 使用したzodのバージョンは3.24.1です。

実装サンプル

基本的には以下のような感じで、validatorsにzodのスキーマを設定すれば大丈夫です。

export const UserAccountInputComponent: FC<Props> = ({ execSubmit }) => {
  // zodの設定
  const userAccountInputFormSchema = z.object({
    userSettingId: z
      .string({
        required_error: "ユーザIDは必須です",
      })
      .min(1, {
        message: "ユーザIDは必須です",
      })
      .regex(halfSizeRegex, "半角文字で入力してください"),
    name: z
      .string({
        required_error: "名前は必須です",
      })
      .min(1, {
        message: "名前は必須です",
      }),
    urlList: z.array(z.string()),
    detail: z.string().optional(),
  });
  type UserAccountInputFormType = z.infer<typeof userAccountInputFormSchema>;
  // Formの設定
  const { Field, handleSubmit, setFieldValue } =
    useForm<UserAccountInputFormType>({
      validators: {
        onSubmit: userAccountInputFormSchema,
      },
      defaultValues: {
        userSettingId: "",
        name: "",
        detail: "",
        urlList: [""],
      },
      onSubmit: async ({ value }) => {
        execSubmit(value);
      },
    });
・
・
・
・
};

Discussion