react-textarea-autoheight

react-textarea-autoheight adjusts your textareas' height automatically as you type in.

See the demo here

Installation

You can install this package using npm:

npm install --save react-textarea-autoheight 

After installation you can import the component:

import Textarea from 'react-textarea-autoheight';

Usage

You can pass any props as you pass to normal <textarea/>.

<Textarea placeholder="Type your story..."/>

Currently it has only one prop:

• wrapperClassName: Use this prop to override default .textarea-autoheight class.

Style

There are some classes that you can use to style your <textarea>. The wrapper has a default class .textarea-autosize which you can override using wrapperClassName prop. There is also a .focus class which is added to the wrapper when you focus in the textarea.

You can use the following styles for start:

.textarea-autoheight {   border: 1px solid #eeeeee;   padding: 10px; } .textarea-autoheight:hover {   border-color: #cccccc; } .textarea-autoheight.focus {   border-color: #aaaaaa; }