diarmuradi
hookauto-resizesource: ok · hit
Auto Resize
npx shadcn add "https://diarmuradi.com/r/auto-resize.json"free
No selection tags yet — empty means no evidence, not lack of support.
Files1 · source cached 10/9/2026, 4:51:49 AM
auto-resize.ts
"use client"
import { useCallback, useEffect, useRef } from "react"
interface UseAutoResizeTextareaProps {
minHeight: number
maxHeight?: number
}
export function useAutoResizeTextarea({
minHeight,
maxHeight,
}: UseAutoResizeTextareaProps) {
const textareaRef = useRef<HTMLTextAreaElement>(null)
const adjustHeight = useCallback(
(reset?: boolean) => {
const textarea = textareaRef.current
if (!textarea) return
if (reset) {
textarea.style.height = `${minHeight}px`
return
}
// Temporarily shrink to get the right scrollHeight
textarea.style.height = `${minHeight}px`
// Calculate new height
const newHeight = Math.max(
minHeight,
Math.min(textarea.scrollHeight, maxHeight ?? Number.POSITIVE_INFINITY)
)
textarea.style.height = `${newHeight}px`
},
[minHeight, maxHeight]
)
useEffect(() => {
// Set initial height
const textarea = textareaRef.current
if (textarea) {
textarea.style.height = `${minHeight}px`
}
}, [minHeight])
// Adjust height on window resize
useEffect(() => {
const handleResize = () => adjustHeight()
window.addEventListener("resize", handleResize)
return () => window.removeEventListener("resize", handleResize)
}, [adjustHeight])
return { textareaRef, adjustHeight }
}