☃️
【React】TanStack Formでzodを使う時zod-form-adapterが不要になってた(2025年1月時点)
概要
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