React Hook Form

最近仕事でReact Hook Formを使っているのでここにメモを残す

React Hook Formとは

Reactでフォームを簡潔に書くことができるライブラリ https://react-hook-form.com/

React Hook Formを使うとuseStateを使うよりもレンダー回数を減らせたりバリデーション実装が楽になったりする

import { SubmitHandler, useForm } from 'react-hook-form'

// 入力値の型
type LoginInfo = {
  email: string
  password: string
}

export const LoginForm = (): JSX.Element => {
  const { handleSubmit, register } = useForm<LoginInfo>()

  // ログインボタンを押したときの処理
  const login: SubmitHandler<LoginInfo> = (loginInfo) => {
    console.log(loginInfo)
  }

  return (
    <form onSubmit={handleSubmit(login)}>
      <input type="email" placeholder="email" {...register('email')} />
      <input type="password" placeholder="Password" {...register('password')} />
      <button type="submit">ログイン</button>
    </form>
  )
}

ちなみにsubmitボタンをformタグで囲めない場合は、buttonタグのformプロパティにformのidと同じ文字列を書く

export const LoginForm = (): JSX.Element => {
  const { handleSubmit, register } = useForm<LoginInfo>()

  // ログインボタンを押したときの処理
  const login: SubmitHandler<LoginInfo> = (loginInfo) => {
    console.log(loginInfo)
  }

  return (
    <>
      <form id="login" onSubmit={handleSubmit(login)}>
        <input type="email" placeholder="email" {...register('email')} />
        <input type="password" placeholder="Password" {...register('password')} />
      </form>
      <button form="login" type="submit">ログイン</button>
    <>
  )
}