fit-textarea

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

Usage no npm install needed!

<script type="module">
  import fitTextarea from 'https://cdn.skypack.dev/fit-textarea';
</script>

README

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