A textarea component for React which grows with content

by React

react-textarea-autosize

Drop-in replacement for the textarea component which automatically resizes textarea as content changes. A native React version of the popular jQuery Autosize!

This module supports IE9 and above.

View demo Download Source 
import Textarea from "react-textarea-autosize";

// If you use CommonJS syntax:
// var Textarea = require('react-textarea-autosize').default;

React.renderComponent(
  <div>
    <Textarea />
  </div>,
  document.getElementById("element")
);

Install

npm install react-textarea-autosize

FAQ

How to focus

Get a ref to inner textarea:

<Textarea inputRef={tag => (this.textarea = tag)} />

And then call a focus on that ref:

this.textarea.focus();

To autofocus:

<Textarea autoFocus />

(all HTML attributes are passed to inner textarea)

How to test it with jest and react-test-renderer

Because jest provides polyfills for DOM
objects by requiring jsdom and
react-test-renderer doesn't
provide refs for rendered components out of the box (calling ref callbacks with
null), you need to supply a mocked ref in your tests. You can do it like this
(more can be read
here):

const tree = renderer
  .create(<Textarea />, {
    createNodeMock: () => document.createElement("textarea")
  })
  .toJSON();

GitHub