Components
Loading preview...
A hook that automatically resizes a textarea based on its content
@kokonutd
npx shadcn@latest add https://21st.dev/r/kokonutd/use-auto-resize-textareaimport { 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"
/>
)
}