react-expanding-textarea

React textarea component to automatically expand and contract your textareas.

Installation

npm i react-expanding-textarea

Usage

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}
      />
    </>
  )
}

Using The `rows` Prop

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.

Manually Calling `resize`

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'))

Contributors

Thanks goes to these wonderful people (emoji key):

_{Robert Pearce} 💻 📖 💡 🤔 ⚠️	_Anuj 🐛	_{Lloyd Watkin} 🤔	_{Jordan Hornblow} 🐛	_visgotti 🤔	_{Thomas Sunde Nielsen} 🐛 🤔	_cibulka 🐛 🤔
_{Brett Smith} 🐛	_{Rauno Freiberg} 🐛 💻	_{Thomas Kristiansen} 🤔	_Puspender 🐛	_{Mark Thomas} 🐛	_Artem 🐛	_{Eva Raymond} 🐛
_{Chris Drackett} 🐛	_{Simon Smith} 🐛 🤔 👀	_jordie23 🐛 🤔	_{Mat Sz} 🐛 💻	_crtl 🐛 🤔	_{Jonathan Wan} 🐛 💻	_{James Moss} 🐛 🤔