React textarea component to automatically expand and contract your textareas
npm install react-expanding-textarea   
React textarea component to automatically expand and contract your textareas.
You can view the demo here.
* Installation
* Usage
* Using The rows Prop
* Manually Calling resize
* Changelog
* Contributing
* Code of Conduct
```
npm i react-expanding-textarea
Use this exactly like you would a normal
`javascript
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 (
<>
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 basedlineHeight
on computed , borderTopWidth, borderBottomWidth, paddingToppaddingBottom
and to deduce what the minimum height-in-rows the component
should be.
If for some reason you need to manually resize a
`typescript`
interface Resize {
(rows: number, el: HTMLTextAreaElement | null): void
}
And you can use it like this:
`javascript
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!