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.
All Contributors npm version npm downloads bundlephobia size
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):
Robert Pearce
💻 📖 💡 🤔
Anuj
🐛
Lloyd Watkin
🤔
Jordan Hornblow
🐛
visgotti
🤔
Thomas Sunde Nielsen
🐛 🤔
cibulka
🐛 🤔
This project follows the all-contributors specification. Contributions of any kind welcome!