useAutoResizeTextarea

Forms 24

About

A hook that automatically resizes a textarea based on its content

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds useAutoResizeTextarea to your project and fits it to your theme.

Code

How useAutoResizeTextarea is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { useAutoResizeTextarea } from "@/components/hooks/use-auto-resize-textarea"
import { ChangeEvent, useState} from 'react'


interface AutoResizeTextareaProps {
  value: string
  onChange: (value: string) => void
  placeholder?: string
  className?: string
}

function AutoResizeTextarea({ 
  value, 
  onChange, 
  placeholder,
  className 
}: AutoResizeTextareaProps) {
  const { textareaRef, adjustHeight } = useAutoResizeTextarea({
    minHeight: 100,  // minimum height in pixels
    maxHeight: 400   // optional maximum height in pixels
  })

  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
    onChange(e.target.value)
    adjustHeight()
  }

  return (
    <textarea
      ref={textareaRef}
      value={value}
      onChange={handleChange}
      placeholder={placeholder}
      className={className}
    />
  )
}


export function AutoResizeTextareaDemo() {
  const [text, setText] = useState('')

  return (
    <AutoResizeTextarea
      value={text}
      onChange={setText}
      placeholder="Type something..."
      className="w-full p-2 border rounded"
    />
  )
}