【超簡単】Next.js 可変テキストボックスの作り方

文字数に応じて高さが可変するテキストボックスの作成のメモです

【css】
overflow-hidden: スクロールバーを非表示にする
resize-none: 手動での高さ変更を不可にする

【js】
onChangeで文字の入力/削除が行われるごとにresizeTextAreaを発火させる

e.target.style.height = 'auto'
e.target.style.height = `${e.target.scrollHeight}px` 

文字の入力分だけtextAreaのサイズを可変させる

page.tsx

"use client"

export default function Home() {
  const resizeTextArea = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    e.target.style.height = 'auto' // 一度高さをリセット
    e.target.style.height = `${e.target.scrollHeight}px` // 新しいscrollHeightに基づいて高さを設定
  }
  return (
    <>
    <div className="w-full justify-center flex-col items-center flex">
      <h1 className="p-5 font-bold text-2xl">可変テキストボックス</h1>
        <textarea
          className="w-[300px] resize-none overflow-hidden rounded-lg border p-3 text-sm"
          placeholder="テキストを入力してください"
          onChange={(e) => {
            resizeTextArea(e)
          }}
        ></textarea>
    </div>
    </>
  );
}