🐡

Reactでtextareaの高さを改行に合わせて変える

2023/06/21に公開

Reactでtextareaの高さを中の文字の高さに合わせて変える(改行等されて高さがオーバーフローしたときに、スクロールバーを出すのではなく、枠の高さを変える)ようにしてみました。

実装

実装はこんな感じです。
こちらに実装サンプルを作ってみました。

<textarea
  name="message"
  onChange={(e) => {
    // これ入れないとサイズが変わったあとに内容を削除したときなど動きがおかしい
    e.target.style.height = 'auto';
    // 改行に合わせて高さを変える
    e.target.style.height = e.target.scrollHeight + 'px';
  }}
/>

まとめ

デフォでそういう設定があるのかと思ったのですが、こんな力技しかないのか…?私がちょっと調べた感じだとなかったので、他にいい方法あれば教えてください-人-

Discussion