Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-autosize-textarea

buildo622.8kMIT7.1.0TypeScript support: included

replacement for built-in textarea which auto resizes itself

react, react-component, textarea, autosize, resize, height, growing, size

readme

React Autosize Textarea

A light replacement for built-in <textarea /> component which automatically adjusts its height to match the content.

NB: It does not require any polyfill

import ReactDOM from 'react-dom';
import TextareaAutosize from 'react-autosize-textarea';

ReactDOM.renderComponent(
  <TextareaAutosize {...textareaProps} onResize={(e) => {}} />,
  document.body
);

Install

npm install --save react-autosize-textarea
yarn add react-autosize-textarea

Demo

Live Examples

Usage

TextareaAutosize is perfectly compatible with ReactJS default one, so to get started you can simply replace any <textarea></textarea> with <TextareaAutosize></TextareaAutosize>. It's that easy :)

Props

You can pass any prop you're allowed to use with the default React textarea (valueLink too).

In addition to them, TextareaAutosize comes with some optional custom props to facilitate its usage:

Name Type Default Description
onResize Function | optional. Called whenever the textarea resizes
rows Number | optional. Minimum number of visible rows
maxRows Number | optional. Maximum number of visible rows
async Boolean false optional. Initialize autosize asynchronously. Enable it if you are using StyledComponents. This is forced to true when maxRows is set. Async initialization will make your page "jump" when the component appears, as it will first be rendered with the normal size, then resized to content.
ref Function | optional. Ref to the DOM node

onResize

Sometimes you may need to react any time TextareaAutosize resizes itself. To do so, you should use the optional callback onResize which will be triggered at any resize with the autosize:resized event object:

function onResize(event) {
  console.log(event.type); // -> "autosize:resized"
}

<TextareaAutosize onResize={onResize} />

Set min/max height

You can set minHeight and maxHeight through CSS or inline-style as usual:

<TextareaAutosize style={{ minHeight: 20, maxHeight: 80 }} /> // min-height: 20px; max-height: 80px;

NB: you may need to take into account borders and/or padding.

In addition to minHeight, you can force TextareaAutosize to have a minimum number of rows by passing the prop rows:

<TextareaAutosize rows={3} /> // minimun height is three rows

In addition to maxHeight, you can force TextareaAutosize to have a maximum number of rows by passing the prop maxRows:

<TextareaAutosize maxRows={3} /> // maximum height is three rows

Refs to DOM nodes

In order to manually call textarea's DOM element functions like focus() or blur(), you need a ref to the DOM node.

You get one by using the prop ref as shown in the example below:

class Form extends React.Component {
  constructor() {
    this.textarea = React.createRef()
  }

  componentDidMount() {
    this.textarea.current.focus();
  }

  render() {
    return (
      <TextareaAutosize ref={this.textarea} />
    );
  }
}

Browser Compatibility

Chrome Firefox IE Safari Android
Yes Yes 9+ Yes 4+

Credits

This module is based on the very popular autosize script written by Jack Moore.

Check out his repo or website for more documentation.

changelog

Change Log

Unreleased

Full Changelog

New features:

  • Failed prop type: Invalid prop innerRef of type function supplied to TextareaAutosizeClass, expected object #141
  • onChange typescript definition problem #137
  • Function passed to innerRef is never called #135
  • Switch to forwardRef instead of callback style ref #134
  • lose ref value after rerendering page #133
  • THANK YOU! #132
  • Passing a function to ref fails prop type validation #130
  • Resizing text area horizontally, not vertical, is it possible ? #126
  • innerRef shortcomings #123

v7.0.0 (2019-03-26)

Full Changelog

Fixes (bugs & defects):

  • onResize types are wrong #119
  • onResize not called if passed when component already mounted #118

Breaking:

  • Support for React.createRef() refs passed to innerRef #102

v6.0.0 (2018-12-06)

Full Changelog

Breaking:

  • Provide an instance method to update size #114

v5.0.1 (2018-12-03)

Full Changelog

Fixes (bugs & defects):

  • Disabled textareas don't get resized (FF + IE) #17

v5.0.0 (2018-09-28)

Full Changelog

New features:

  • Fix namespace export #107

Breaking:

  • Component Props type incorrectly includes ref #104

v4.0.0 (2018-06-18)

Full Changelog

Breaking:

  • Regression: textarea ‘jumps’ after initial load #95

v3.0.3 (2018-04-11)

Full Changelog

Fixes (bugs & defects):

  • Changing number of rows doesn't update styles #100

v3.0.2 (2018-01-22)

Full Changelog

Fixes (bugs & defects):

  • Fixed @types/ dependencies cause duplication on install #91

v3.0.1 (2017-12-29)

Full Changelog

New features:

  • Update "@types/react" to v16.0.30 #89

v3.0.0 (2017-12-12)

Full Changelog

Breaking:

  • Wrong initial height when using StyledComponents #71

v2.0.0 (2017-12-07)

Full Changelog

Breaking:

  • upgrade autosize to v4 #72

v1.0.2 (2017-12-07)

Full Changelog

Fixes (bugs & defects):

  • TS Types can't be found by VSCode/tsc #82
  • TextareaAutosize.Props type annotations are not working in VSCode #80

v1.0.1 (2017-12-04)

Full Changelog

Fixes (bugs & defects):

  • Version 1.0.0 not found? #77

v1.0.0 (2017-12-03)

Full Changelog

Breaking:

  • Refactor in TypeScript! #75

New features:

  • Error in React 16: innerRef passed to the DOM element. #73

v0.4.9 (2017-09-27)

Full Changelog

New features:

  • Upgrade peerDeps to react & react-dom 16 #66

v0.4.8 (2017-07-18)

Full Changelog

Fixes (bugs & defects):

  • Typescript: compile time error for native textarea attributes #59

v0.4.7 (2017-07-03)

Full Changelog

Fixes (bugs & defects):

  • JSX element type 'TextareaAutosize' is not a constructor function for JSX elements. #56

v0.4.6 (2017-06-27)

Full Changelog

Fixes (bugs & defects):

  • this.dispatchEvent(UPDATE) called too often #54

v0.4.5 (2017-06-19)

Full Changelog

Fixes (bugs & defects):

  • Max rows not working with text without breakline char #50

v0.4.4 (2017-06-05)

Full Changelog

Fixes (bugs & defects):

  • linked module fails to load in webpack #48

New features:

  • typescript support #46

v0.4.3 (2017-04-21)

Full Changelog

New features:

  • Add prop innerRef to access textarea DOM node #40
  • Warning: This synthetic event is reused for performance reasons #38

v0.4.2 (2017-04-10)

Full Changelog

Fixes (bugs & defects):

  • Last release broke support for React < 15.5 #36

v0.4.1 (2017-04-10)

Full Changelog

Fixes (bugs & defects):

  • Address react 15.5 deprecations regarding PropTypes usage and test-utils #35

v0.4.0 (2017-03-30)

Full Changelog

Breaking:

  • Remove react-tcomb #30

v0.3.6 (2017-01-22)

Full Changelog

New features:

v0.3.5 (2017-01-22)

Full Changelog

Fixes (bugs & defects):

  • Getting a lot of Null is not an object in production #27

v0.3.4 (2016-11-21)

Full Changelog

Fixes (bugs & defects):

  • Ref issue & Compatibility with React 15.4.0 #23

v0.3.3 (2016-09-14)

Full Changelog

New features:

  • Warning by props #19

v0.3.2 (2016-08-10)

Full Changelog

New features:

  • Please publish version with react 15 compatibility on NPM #18

v0.3.1 (2016-05-18)

Full Changelog

New features:

  • Update peer dependencies #15
  • remove react 0.14 warnings #13

v0.3.0 (2016-04-21)

Full Changelog

New features:

  • use ES6 class #11

v0.2.6 (2015-12-23)

Full Changelog

v0.2.5 (2015-10-14)

Full Changelog

v0.2.4 (2015-06-25)

Full Changelog

v0.2.3 (2015-06-19)

Full Changelog

New features:

  • Continuous integration is failing #6

v0.2.2 (2015-06-11)

Full Changelog

v0.2.0 (2015-06-11)

Full Changelog

New features:

  • Probable memory leak #2
  • Rename lib to src? #1

v0.1.1 (2015-06-10)

Full Changelog

v0.1.0 (2015-06-09)

Full Changelog

react-0.13 (2016-02-11)