# react-autosize-textarea

> replacement for built-in textarea which auto resizes itself

Latest version **7.1.0** (published 2020-07-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-autosize-textarea
pnpm add react-autosize-textarea
yarn add react-autosize-textarea
bun add react-autosize-textarea
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 7.1.0 |
| Published | 2020-07-08 |
| First published | 2015-06-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 39.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 489 |
| Author | Francesco Cioria |
| Maintainers | aslug, ecaml, ema_9000, gabro, giogonzo, malpenzibo, tpetrucciani, veej |
| Keywords | react, react-component, textarea, autosize, resize, height, growing, size |

## Links

- npm: https://www.npmjs.com/package/react-autosize-textarea
- Repository: https://github.com/buildo/react-autosize-textarea
- Issues: https://github.com/buildo/react-autosize-textarea/issues
- npm.io page: https://npm.io/package/react-autosize-textarea

## Dependencies (3)

- [autosize](https://npm.io/package/autosize.md) ^4.0.2
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.6
- [line-height](https://npm.io/package/line-height.md) ^0.3.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 7.1.0 (latest) — 2020-07-08
- 5.0.0-pre (next) — 2018-08-07
- 7.0.0 — 2019-03-26
- 6.0.0 — 2018-12-06
- 5.0.1 — 2018-12-03
- 5.0.0 — 2018-09-28
- 4.0.0 — 2018-06-18
- 3.0.3 — 2018-04-11
- 3.0.2 — 2018-01-22
- 3.0.1 — 2017-12-29
- 3.0.0 — 2017-12-12
- 2.0.0 — 2017-12-07
- 1.0.2 — 2017-12-07
- 1.0.1 — 2017-12-04
- 1.0.0 — 2017-12-03
- … 23 more at https://npm.io/package/react-autosize-textarea/versions

## 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**

```jsx
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](http://react-components.buildo.io/#textareaautosize)

## 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** | <code>Function</code> |  | *optional*. Called whenever the textarea resizes |
| **rows** | <code>Number</code> |  | *optional*. Minimum number of visible rows |
| **maxRows** | <code>Number</code> |  | *optional*. Maximum number of visible rows |
| **async** | <code>Boolean</code> | <code>false</code> | *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** | <code>Function</code> |  | *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:

```jsx
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:

```jsx
<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`:

```jsx
<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`:

```jsx
<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:

```jsx
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](https://github.com/jackmoore).

Check out his [repo](https://github.com/jackmoore/autosize) or [website](http://www.jacklmoore.com/autosize/) for more documentation.

---
_Source: https://npm.io/package/react-autosize-textarea · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._