Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 327x 327x 112x 112x 112x 112x 327x | import { useLayoutEffect, useRef } from 'react'
import type { ComponentProps } from 'react'
// A textarea that starts at one line and grows to fit its content.
export function AutoTextarea({ value, className, ...props }: ComponentProps<'textarea'>) {
const ref = useRef<HTMLTextAreaElement>(null)
useLayoutEffect(() => {
const el = ref.current
Iif (!el) return
el.style.height = 'auto'
el.style.height = `${el.scrollHeight}px`
}, [value])
return (
<textarea
ref={ref}
rows={1}
value={value}
className={`resize-none overflow-hidden ${className ?? ''}`}
{...props}
/>
)
}
|