3.0.0 • Published 3 years ago

fit-textarea v3.0.0

Weekly downloads
797
License
MIT
Repository
github
Last release
3 years ago

fit-textarea

Automatically expand a <textarea> to fit its content, in a few bytes

Try the demo!

Features:

  • Small
  • No layout thrashing (no DOM changes unless necessary)
  • You can set a minimum height (via rows attribute or height CSS property)
  • If the field is resizable, the new size will be treated as minimum height

Install

npm install fit-textarea

Setup

// This module is only offered as a ES Module
import fitTextarea from 'fit-textarea';
<textarea rows="3">Use the rows attribute to set its minimum height</textarea>

Usage

Once, one element

const textarea = document.querySelector('textarea');
fitTextarea(textarea);

As the user types

One element

const textarea = document.querySelector('textarea');
fitTextarea.watch(textarea);

Array/NodeList/Iterable of elements

const textareas = document.querySelectorAll('textarea');
fitTextarea.watch(textareas);

With a selector

The selector is run once, so it's equivalent to the example above.

fitTextarea.watch('textarea');

Related

  • indent-textarea - Add editor-like tab-to-indent functionality to , in a few bytes.
  • delegate-it - DOM event delegation, in <1KB. Can be used to attach one fit-textarea to many elements.
  • Refined GitHub - Uses this module.