Watch.ts

"use client";

import { type ReactNode } from "react";

import {
  type Control,
  type FieldPath,
  type FieldPathValue,
  type FieldValues,
  useWatch,
} from "react-hook-form";

type Props<
  TFieldValues extends FieldValues,
  TFieldName extends FieldPath<TFieldValues>,
> = {
  /**
   * フィールドのパス
   */

  name: TFieldName;
  defaultValue?: FieldPathValue<TFieldValues, TFieldName>;
  control?: Control<TFieldValues>;
  disabled?: boolean;
  exact?: boolean;

  /**
   * 要素を描画する関数
   */
  render: (value: FieldPathValue<TFieldValues, TFieldName>) => ReactNode;
};

/**
 * react-hook-form の動的に変化する値を使用できるコンポーネント
 *
 * 再レンダリング範囲はコンポーネント内に限定される
 *
 * @public
 */
export const Watch = <
  TFieldValues extends FieldValues,
  TFieldName extends FieldPath<TFieldValues>,
>({
  render,
  ...props
}: Props<TFieldValues, TFieldName>): ReactNode => {
  const value = useWatch<TFieldValues, TFieldName>(props);

  return render(value);
};