React textarea component to automatically expand and contract your textareas.
You can view the demo here.
Install the package:
$ npm i react-expanding-textarea
or
$ yarn add 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 for="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.
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!