react-autosize-textarea

by buildo

A textarea perfectly compatible with ReactJS default one which auto resizes its height based on user...

446 Stars 73 Forks Last release: over 1 year ago (v7.0.0) MIT License 272 Commits 39 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

React Autosize Textarea

A light replacement for built-in

 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( {}} />, 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
 with 
. 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"
}

Set min/max height

You can set

minHeight
and
maxHeight
through CSS or inline-style as usual:
 // 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
:
 // 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
:
 // 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 ( ); } }

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.