JavaScript Library For Form Element Autosizing – Stretchy

Preview:

Description:

Stretchy is a lightweight and zero-dependency JavaScript library that auto-resizes your form elements (textures, input fields, and select boxes) accordion to their content when typing.

How to use it:

1. Install and import the Stretchy.

# NPM
$ npm i stretchy

// ES Module
import * as Stretchy from "./dist/stretchy.min.js";
Stretchy.init();
// CommonJS
require("stretchy");
// Browser
<script src="./dist/stretchy.iife.min.js" async></script>

2. That’s it. The library will automatically apply the auto-resize functionality to input fields and textarea/select elements with no size attribute.

3. Or apply the auto-resize functionality to specific elements.

Stretchy.selectors.filter = ".class-1, .class-2";

4. API methods.

// Autosize one element based on its content. 
Stretchy.resize(element)
// Apply Stretchy.resize() to a collection of elements, or all Stretchy is set to apply to, if no argument is provided.
Stretchy.resizeAll(elements)
// Can Stretchy be used on this particular element? (checks if element is in the DOM, if it's of the right type and if it matches the selector filter provided by data-stretchy-selector, if the attribute is set.
Stretchy.resizes(element)
// Set to false to temporarily disable Stretchy.
Stretchy.active

Changelog:

v2.0.1 (10/18/2022)

• Tweak for <select>Fixed transpilation