🍣
【Web Library】Nextjs13で覚える便利なライブラリ【#10useFormik】
【#10useFormik】
YouTube: https://youtu.be/uM2V_sWCpuE
今回はFormikのhooksの設定と
「Yup」のインストールを行います。
npm i yup
インストールができましたら、
「app」->「formik」フォルダに新しく「hooks」フォルダを作成して、
「page.tsx」を作成します。
app/formik/hooks/page.tsx
'use client';
import { useFormik } from 'formik';
import * as Yup from 'yup';
const Page = () => {
const formik = useFormik({
initialValues: {
email: '',
password: '',
},
validationSchema: '',
onSubmit: (values) => {
alert(JSON.stringify(values, null, 2));
},
});
return (
<div className="text-white">
<h1 className="mb-4 text-center text-3xl font-bold">
Any place in your app!
</h1>
</div>
);
};
export default Page;
ここまでできましたら、
次回は「validationSchema: ''」の部分に
バリデーションを設定していきます。
Discussion