React-expanding-textarea NPM

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

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