入力文字の行数で縦幅が可変するtextareaのReactコンポーネント

概要

次の記事を参考に入力文字の行数で縦幅が可変するReactコンポーネントを作成しました
react hook formがすぐに使いたかったのでforwordRefを使用して実装しています

• 【参考記事】内容に応じてサイズが可変する を素敵に実装する
  • （非常にわかりやすく助かりました。ありがとうございます）

TypeScriptのコード

import { ComponentProps, forwardRef, useRef } from "react"

export const FlexTextArea = forwardRef<HTMLTextAreaElement, ComponentProps<"textarea">>(
  (props, ref) => {
    const dummyRef = useRef<HTMLDivElement>(null)

    return (
      <div className={"flex_text_area"}>
        <div className={"flex_text_area_dummy"} aria-hidden={true} ref={dummyRef} />
        <textarea
          {...props}
          ref={ref}
          onChange={(e) => {
            if (dummyRef.current) {
              dummyRef.current.textContent = e.target.value + "\u200b"
            }
            if (props.onChange) {
              props.onChange(e)
            }
          }}
        />
      </div>
    )
  },
)

スタイル(less)

.flex_text_area {
    position: relative;

    .flex_text_area_dummy {
        overflow: hidden;
        visibility: hidden;
        box-sizing: border-box;
        padding: 5px 15px;
        min-height: 120px;
        white-space: pre-wrap;
        word-wrap: break-word;
        overflow-wrap: break-word;
        border: 1px solid;
    }

    & > textarea {
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        padding: 5px 15px;
        width: 100%;
        height: 100%;
        background-color: transparent;
        border: 1px solid #b6c3c6;
        border-radius: 4px;
        color: inherit;
        font: inherit;
        letter-spacing: inherit;
        resize: none;
    }
}