Reactで入力内容の量によって高さが変化するTextareaの実装メモ

Reactで入力内容の量によって高さが変化するTextareaの実装メモ

Reactで入力内容の量によって高さが変化するTextareaを作ってみたのでコードのメモ

ライブラリ

• react
• shadcn

コード

• useRefを使用してtextareaのscrollHeightを取得
• tailwind(v3)では動的な値を使用したクラスは指定してもスタイルが当てられないのでstyle属性を使用してheightを操作している。(h-[contentHeight + px]のようなクラスは動作しない)
• 入力値がなくなった場合、初期高さ(ある場合)に戻す

import { useState, useRef } from "react";
import { Textarea } from "@/components/ui"

export const CustomTextarea = () => {
  const [contentHeight, setContentHeight] = useState<number>(500)
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  const onChangeContent = (e: ChangeEvent<HTMLTextAreaElement>) => {
    const value = e.target.value
    if (textareaRef.current) {
      setContentHeight(textareaRef.current.scrollHeight)
    }

    if (!value.length) {
      setContentHeight(40)
    }
  };

  return (
    <Textarea 
      className="resize-none overflow-hidden"
      onChange={onChangeContent}
      ref={textareaRef}
      style={{
        height: contentHeight
      }}
      />
  )
}

動作画面

最後に

もっといい方法などあればコメントに書いていただけると幸いです。
よろしくお願いいたします。