react-expanding-textarea

React textarea component to automatically expand and contract your textareas.

Links

Installation

Install the package:

$ npm i react-expanding-textarea

or

$ yarn add 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.

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 🐛 🤔