Need private packages and team management tools?Check out npm Teams »

react-textarea-autosize

8.0.1 • Public • Published

npm version npm

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! Weighs around 1.3KB (minified & gzipped).

This module supports IE9 and above.

import TextareaAutosize from 'react-textarea-autosize';
 
// If you use CommonJS syntax:
// var TextareaAutosize = require('react-textarea-autosize').default;
 
React.renderComponent(
  <div>
    <TextareaAutosize />
  </div>,
  document.getElementById('element'),
);

Install

npm install react-textarea-autosize

Demo

https://andarist.github.io/react-textarea-autosize/

Props

Special props:

prop type description
inputRef func Function invoked with DOM node as argument. Default: () => {}
maxRows number Maximum number of rows upto which the textarea can grow
minRows number Minimum number of rows to show for textarea
onHeightChange func Function invoked on textarea height change, with height as first argument
cacheMeasurements boolean Reuse previously computed measurements when computing height of textarea. Default: false

Apart from these, the component accepts all props that are accepted by <textarea/>, like style, onChange, value, etc.

FAQ

How to focus

Get a ref to inner textarea:

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

And then call a focus on that ref:

this.textarea.focus();

To autofocus:

<TextareaAutosize autoFocus />

(all HTML attributes are passed to inner textarea)

How to test it with jest and react-test-renderer if you need ref

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 in you need it for your tests. You can do it like this (more can be read here):

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

Install

npm i react-textarea-autosize

DownloadsWeekly Downloads

1,124,131

Version

8.0.1

License

MIT

Unpacked Size

49.7 kB

Total Files

17

Last publish

Collaborators

  • avatar
  • avatar
  • avatar