react-hook-formで最低限

react-hook-form を使用してフォーム周りを最低限で実装してみました。

import { useEffect } from "react";
import { SubmitHandler, useForm } from "react-hook-form";

type FieldValues = {
  content: string;
};

export type HogeFormProps = {
  defaultValues?: FieldValues;
  onSubmit: SubmitHandler<FieldValues>;
};

function HogeForm({ defaultValues, onSubmit }: HogeFormProps): JSX.Element {
  const {
    formState: { isSubmitted, isSubmitting },
    handleSubmit,
    register,
    reset,
  } = useForm<FieldValues>({
    defaultValues: defaultValues || {
      content: "",
    },
  });

  useEffect(() => {
    if (!isSubmitted) {
      return;
    }

    reset();
  }, [isSubmitted, reset]);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <textarea {...register("content", { required: true })} />
      <button disabled={isSubmitting}>送信する</button>
    </form>
  );
}

export default HogeForm;

isSubmitSuccessful といった値もあるので、いろいろと自由度は高そうです。

submit したあとにどうやってフォームをクリアしたら良いのかなーと思っていたのですが、さすが react-hook-form ですね。

組みやすさは他のパッケージより頭 2 つ 3 つ抜けている印象です。