Skip to content
React textarea component to automatically expand and contract your textareas.
JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__ add support for a forwarded ref Jan 20, 2020
docs add support for a forwarded ref Jan 20, 2020
example add support for a forwarded ref Jan 20, 2020
source add support for a forwarded ref Jan 20, 2020
.all-contributorsrc Add @tknuts as a contributor Jan 20, 2020
.eslintignore upgrades & build refactorings Sep 7, 2019
.eslintrc.js upgrades & build refactorings Sep 7, 2019
.gitignore upgrades & build refactorings Sep 7, 2019
.prettierrc.js upgrades & build refactorings Sep 7, 2019
.travis.yml bump travis nodejs Sep 9, 2019
AUTHORS Rewrite using react hooks, add tests & fix issue where top&bottom bor… Feb 24, 2019
CHANGELOG.md changelog v2.1.1 Jan 20, 2020
CODE_OF_CONDUCT.md Rewrite using react hooks, add tests & fix issue where top&bottom bor… Feb 24, 2019
CONTRIBUTING.md Rewrite using react hooks, add tests & fix issue where top&bottom bor… Feb 24, 2019
LICENSE Rewrite using react hooks, add tests & fix issue where top&bottom bor… Feb 24, 2019
README.md README update Jan 20, 2020
babel.config.js add support for a forwarded ref Jan 20, 2020
husky.config.js add support for a forwarded ref Jan 20, 2020
jest.config.js upgrades & build refactorings Sep 7, 2019
lint-staged.config.js add support for a forwarded ref Jan 20, 2020
package.json bump jest-dom, babel-jest, jest, lint-staged, rollup Jan 24, 2020
rollup.config.js add support for a forwarded ref Jan 20, 2020
yarn.lock bump jest-dom, babel-jest, jest, lint-staged, rollup Jan 24, 2020

README.md

react-expanding-textarea

All Contributors npm version npm downloads Build Status Coverage Status Maintainability

React textarea component to automatically expand and contract your textareas.

You can view the demo here.

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

🤔

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

You can’t perform that action at this time.