React Hook Formのregisterをコンポーネントのpropsに渡す方法

Controllerを使用せずにコンポーネントに対してReact Hook Formのregisterを渡したいことがあったのでメモ。

"use client";
import Text from "@/components/Text";
import { useForm } from "react-hook-form";

type SampleForm = {
  sampleText: string;
};

export default function Home() {
  const { register, handleSubmit, watch } = useForm<SampleForm>();

  const sampleText = watch("sampleText");
  console.log(sampleText);

  const onSubmit = (data: SampleForm) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Text label="サンプルインプット" register={register("sampleText")} />
      <button type="submit">Submit</button>
    </form>
  );
}

import { InputHTMLAttributes } from "react";
import { UseFormRegisterReturn } from "react-hook-form";

type InputProps = InputHTMLAttributes<HTMLInputElement> & {
  label: string;
  register: UseFormRegisterReturn;
};

const Text = ({ label, register, ...otherProps }: InputProps) => {
  return (
    <div>
      <label>{label}</label>
      <input {...register} {...otherProps} />
    </div>
  );
};

export default Text;