こんにちわ。nap5です。

タイトルのカスタムフックはこちらになります。

![img](/mosaic-code.jpg)

sampleページがデモになります。

https://codesandbox.io/p/sandbox/delicate-cloud-9xiyvh?file=%2Fsrc%2Ffeatures%2Fsample%2Fcomponents%2FForm.tsx&selection=%5B%7B%22endColumn%22%3A10%2C%22endLineNumber%22%3A17%2C%22startColumn%22%3A10%2C%22startLineNumber%22%3A17%7D%5D

簡単ですが、以上です。

こんにちわ。nap5です。

タイトルのカスタムフックはこちらになります。

```ts
import { useMemo } from 'react'

import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'

import {
  SignInForm,
  SignInFormSchema,
} from '@/features/sample/stores/signInForm'

const useSignInForm = () => {
  const {
    register,
    handleSubmit,
    getValues,
    control,
    reset,
    setValue,
    formState: { errors, isValid },
  } = useForm<SignInForm>({
    defaultValues: {
      email: '',
      password: '',
    },
    resolver: zodResolver(SignInFormSchema),
    mode: 'all',
  })

  return useMemo(() => {
    return {
      control,
      reset,
      getValues,
      setValue,
      register,
      handleSubmit,
      errors,
      isValid,
    }
  }, [
    control,
    reset,
    getValues,
    setValue,
    register,
    handleSubmit,
    errors,
    isValid,
  ])
}

export default useSignInForm

```

sampleページがデモになります。

https://codesandbox.io/p/sandbox/delicate-cloud-9xiyvh?file=%2Fsrc%2Ffeatures%2Fsample%2Fcomponents%2FForm.tsx&selection=%5B%7B%22endColumn%22%3A10%2C%22endLineNumber%22%3A17%2C%22startColumn%22%3A10%2C%22startLineNumber%22%3A17%7D%5D

簡単ですが、以上です。