Neutered Paranoid Meerkat

    This package has been deprecated

    Author message:

    The package contains a critical bug.

    textarea-autoresize

    2.0.9 • Public • Published

    textarea-autoresize

    npm version Build Status Coverage Status codecov.io

    Sauce Test Status

    This package provides a function, that, given textarea DOM Element and (optionally) a set of options, calculates it's height and overflow-y for the size of it's content.

    It's stretching, alright

    Key points

    • Browser support: IE10+
    • Written in pure Javscript(ES6+), framework-agnostic
    • It DOES NOT use ghost elements to calculate the style, so there are no bugs due to the styles mismatch.
    • There are helpful errors and warnings for non-production environment (sanity checks)

    The calculation takes into account every possible combination of:

    • height of the content inside the textarea(including placeholder)
    • maxRows(if passed in options) and max-height in CSS(if present), whichever is smaller
    • minRows(if passed in options), rows attribute on textarea element(if present) and min-height in CSS(if present), whichever is bigger
    • box-sizing
    • padding-top and padding-bottom
    • border-top and border-bottom

    Installation

    npm install --save textarea-autoresize
    

    Usage:

    import { getTextareaStyle } from 'textarea-autoresize';
    
    // Default options
    const options = {
      minRows: 0,
      maxRows: Infinity,
      canShrink: true
    };
    
    const { height, overflowY } = getTextareaStyle(textarea, options);
    
    textarea.style.height = height;
    textarea.style.overflowY = overflowY;
    

    Methods

    getTextareaStyle(textarea[, options])

    • Description:

      • Calculates height and overflow-y for textarea element to match the height of it's content, including padding and border.
    • Arguments:

      • textarea:
        • Type: Element
        • Description: Textarea DOM Node
      • options (optional):
        • Type: Object
        • Properties:
          • minRows (optional):
            • Type: Number
            • Description: minimum amount of rows allowed, expected to be an integer >= 0
            • Default: 0
          • maxRows (optional):
            • Type: Number
            • Description: maximum amount of rows allowed, expected to be an integer >= minRows
            • Default: Infinity
          • canShrink (optional):
            • Type Boolean
            • Description: whether textarea is allowed to shrink in height(or only expand)
            • Default: true
    • Return value:

      • Type: Object
      • Description: new calculated style for textarea
      • Properties:
        • height:
          • Type: String
          • Description: new textarea height in px, e.g. 100px
        • overflowY:
          • Type: String
          • Description: new textarea overflow-y value
          • One of:
            • hidden
            • auto - if calculated height is bigger, than maximum allowed height

    License

    MIT License

    Install

    npm i textarea-autoresize

    DownloadsWeekly Downloads

    85

    Version

    2.0.9

    License

    MIT

    Last publish

    Collaborators

    • le0nik