textarea-autoresize

Framework-agnostic auto-resize utility for textarea

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
textarea-autoresize
2.0.98 years ago8 years agoMinified + gzip package size for textarea-autoresize in KB

Readme

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