import React, { useEffect, useRef } from 'react'
type Props = React.TextareaHTMLAttributes<HTMLTextAreaElement> & { value: string; onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void }
export default function AutoTextarea(props: Props){
  const ref = useRef<HTMLTextAreaElement|null>(null)
  const resize=()=>{ const el=ref.current; if(!el) return; el.style.height='0px'; el.style.height=el.scrollHeight+'px' }
  useEffect(()=>{ resize() },[props.value])
  return <textarea {...props} ref={ref} onChange={(e)=>{ props.onChange(e); requestAnimationFrame(resize) }} style={{...(props.style||{}), overflow:'hidden'}}/>
}