Please consider using https://github.com/Andarist/react-textarea-autosize. There's an insurmountable issue with this approach in #82 that is solved by react-textarea-autosize.
React textarea component to automatically expand and contract your textareas.
You can view the demo here.
- Installation
- Usage
- Using The
rowsProp - Manually Calling
resize - Changelog
- Contributing
- Code of Conduct
npm i react-expanding-textarea
Use this exactly like you would a normal <textarea>; the only
difference is that it is doing some simple expanding work behind the scenes for
you!
import React, { useCallback, useEffect, useRef } from 'react'
import Textarea from 'react-expanding-textarea'
const MyTextarea = () => {
const textareaRef = useRef(null)
const handleChange = useCallback(e => {
console.log('Changed value to: ', e.target.value)
}, [])
useEffect(() => {
textareaRef.current.focus()
}, [])
return (
<>
<label htmlFor="my-textarea">
Please Enter Some Details:
</label>
<Textarea
className="textarea"
defaultValue="Lorem ipsum dolor sit amet, ..."
id="my-textarea"
maxLength="3000"
name="pet[notes]"
onChange={handleChange}
placeholder="Enter additional notes..."
ref={textareaRef}
/>
</>
)
}If you pass a rows prop, then this component will perform a calculation based
on computed lineHeight, borderTopWidth, borderBottomWidth, paddingTop
and paddingBottom to deduce what the minimum height-in-rows the component
should be.
If for some reason you need to manually resize a <textarea>, this package
exports a resize function that has the following type:
interface Resize {
(rows: number, el: HTMLTextAreaElement | null): void
}And you can use it like this:
import { resize } from 'react-expanding-textarea'
// resize based on 3 minimum rows
// and using a React ref
resize(3, refTextarea.current)
// or
// resize based on no minimum rows
// and using a regular DOM Node
resize(0, document.querySelector('textarea'))Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!