textarea-autoresize v2.0.9

textarea-autoresize

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.

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