Nap Power: Maximum

    tt-react-textarea-autosize

    6.1.0-tt2 • 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!

    This module supports IE9 and above.

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

    Install

    npm install react-textarea-autosize

    Changes in tt-react-textarea-autosize fork

    • Fix 'InvalidCallingObject' issue with IE 11
    • Performance: Use same style reference if no style changes occurred
    • Make it impossible to tab into the hidden textarea

    Original project: https://github.com/andreypopp/react-textarea-autosize

    Demo

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

    FAQ

    How to focus

    Get a ref to inner textarea:

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

    And then call a focus on that ref:

    this.textarea.focus();

    To autofocus:

    <Textarea autoFocus />

    (all HTML attributes are passed to inner textarea)

    How to test it with jest and react-test-renderer

    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. You can do it like this (more can be read here):

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

    Development

    To release patch, minor or major version:

    % npm run release:patch
    % npm run release:minor
    % npm run release:major
    

    This will run eslint, compile sources from src/ to dist/, bump a version in package.json and then create a new git commit with tag. If tests or linter fails — commit won't be created. If tasks succeed it publishes to npm and pushes a tag to github.

    Install

    npm i tt-react-textarea-autosize

    DownloadsWeekly Downloads

    122

    Version

    6.1.0-tt2

    License

    MIT

    Unpacked Size

    80.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • mwolson
    • lalva-tt