🍣

【Web Library】Nextjs13で覚える便利なライブラリ【#10useFormik】

2023/03/05に公開

【#10useFormik】

YouTube: https://youtu.be/uM2V_sWCpuE

https://youtu.be/uM2V_sWCpuE

今回はFormikのhooksの設定と
「Yup」のインストールを行います。

https://www.npmjs.com/package/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