Skip to content
This repository has been archived by the owner on Jun 30, 2024. It is now read-only.

React textarea component to automatically expand and contract your textareas.

License

Notifications You must be signed in to change notification settings

rpearce/react-expanding-textarea

⚠️ Retired

Please consider using https://github.com/Andarist/react-textarea-autosize. There's an insurmountable issue with this approach in #82 that is solved by react-textarea-autosize.

react-expanding-textarea

All Contributors npm version npm downloads bundlephobia size

React textarea component to automatically expand and contract your textareas.

You can view the demo here.

Links

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

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

🐛 🤔

SunnyAureliusRichard

🐛

Magoz

🤔

jeffreystorer

🐛

This project follows the all-contributors specification. Contributions of any kind welcome!