Nighttime Pachinko Marathon

    react-textarea-autosize
    TypeScript icon, indicating that this package has built-in type declarations

    8.3.3 • 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
    maxRows number Maximum number of rows up to 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. The second function argument is an object containing additional information that might be useful for custom behaviors. Current options include { rowHeight: number }.
    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 ref={(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

    2,645,851

    Version

    8.3.3

    License

    MIT

    Unpacked Size

    53.3 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar