reactを使った入力フォームでreact-hook-formとバリデーションとしてyupを組み合わせて使っていたがreact-hook-formをv6に引きあげたところ、書き方が変わっていたので記載する。
v5の時
import React from 'react';
import { useForm } from 'react-hook-form';
import * as yup from "yup";
const validationSchema = yup.object().shape({
email: yup.string().required(),
});
const { register, handleSubmit, errors } = useForm<{ email: string }>({
mode: 'onBlur',
defaultValues: defaultValue,
validationSchema: validationSchema,
})
v6の時
import React from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from "yup";
const validationSchema = yup.object().shape({
email: yup.string().required(),
});
const { register, handleSubmit, errors } = useForm<{ email: string }>({
mode: 'onBlur',
defaultValues: defaultValue,
resolver: yupResolver(validationSchema),
})
validationの部分だけ書き方が変わっただけではないので、そのほかの変更点は以下を参照してもらうと良いです。
https://react-hook-form.com/jp/migrate-v5-to-v6
v5のドキュメント
https://react-hook-form.com/v5/api
v6のドキュメント
https://react-hook-form.com/api