useTextareaAutogrow

useTextareaAutogrow.ts

import { RefObject, useEffect, useLayoutEffect } from 'react'

export function useTextareaAutogrow({
  ref,
  value,
  enabled = true,
}: {
  ref: RefObject<HTMLTextAreaElement | null | undefined>
  value: string
  enabled?: boolean
}) {
  useLayoutEffect(() => {
    if (!enabled) {
      return
    }

    const textArea = ref.current
    if (!textArea) {
      return
    }

    textArea.style.height = 'auto'
    textArea.style.height = textArea.scrollHeight + 'px'
  }, [ref, value, enabled])

  useEffect(() => {
    if (!enabled) {
      return
    }

    const textArea = ref.current
    if (!textArea) {
      return
    }

    const resizeObserver = new ResizeObserver(() => {
      textArea.style.height = 'auto'
      textArea.style.height = textArea.scrollHeight + 'px'
    })

    resizeObserver.observe(textArea)

    return () => {
      resizeObserver.disconnect()
    }
  }, [ref, enabled])
}