How to use Stretchy with React?

Import Stretchy as an ESM module and call init() in a useEffect hook to ensure it runs after component mount. It should handle dynamic elements via mutation observers, but test with React's virtual DOM updates.

Stretchy vs CSS grid for form resizing?

Stretchy dynamically adjusts sizes based on content, while CSS grid provides layout control. Use Stretchy for content-driven resizing of individual elements; CSS grid is better for overall layout structuring.

Does Stretchy work with dynamically added form elements?

Yes, Stretchy uses mutation observers to automatically detect and resize new elements added to the DOM, as highlighted in the features.

How to exclude specific inputs from Stretchy?

Use the `data-stretchy-filter` attribute with a CSS selector that excludes those elements, or set `Stretchy.selectors.filter` in JavaScript to a selector that doesn't match them.

What browsers does Stretchy support?

Stretchy v2 supports all modern browsers; v1 had broader support but required polyfills for older browsers like IE, as detailed in the browser support notes.

Open-Awesome

stretchy

NOASSERTIONJavaScriptv2.0.1

A lightweight, dependency-free JavaScript library for automatically resizing form elements (textareas, inputs, selects) to fit their content.

Visit Website GitHub

1.3k stars84 forks0 contributors

What is stretchy?

Stretchy is a lightweight JavaScript library that automatically resizes form elements—like textareas, inputs, and select menus—to fit their content dynamically. It solves the common problem of form controls with fixed dimensions that don't adjust to user input, improving usability without requiring complex CSS or manual scripting.

Target Audience

Frontend developers and designers building forms or interactive UIs who need form elements to resize automatically based on content, especially those working with vanilla JavaScript, web components, or Shadow DOM.

Value Proposition

Developers choose Stretchy for its minimal footprint, zero dependencies, and ease of integration—it works out-of-the-box with HTML attributes alone, respects existing CSS constraints, and automatically handles dynamically added elements via mutation observers.

Overview

Form element autosizing, the way it should be

Use Cases

Best For

Creating dynamic forms where textareas expand as users type
Building custom form components within web components or Shadow DOM
Improving UX in admin panels or dashboards with resizable inputs
Adding autosizing to select menus without native resize support
Implementing form resizing without jQuery or heavy frameworks
Ensuring form elements respect CSS min/max-width/height constraints

Not Ideal For

Projects requiring server-side rendering with zero client-side JavaScript, as Stretchy is a client-side library.
Applications built with frameworks like React or Vue that have built-in or community-driven form resizing components, where Stretchy could add redundant complexity.
Systems needing fine-grained, programmatic control over resizing behavior (e.g., custom algorithms or integration with complex state management) due to Stretchy's minimal API.

Pros & Cons

Pros

Tiny Footprint

At less than 1.5KB minified and gzipped with no dependencies, Stretchy adds minimal overhead, as emphasized in the README's features.

Automatic Dynamic Handling

Uses mutation observers to automatically resize newly added form elements without manual intervention, ideal for dynamic content.

HTML-First Configuration

Can be set up entirely via HTML attributes like `data-filter`, allowing integration without writing JavaScript, as shown in the usage section.

CSS-Compliant Resizing

Respects existing CSS constraints such as min/max-width/height and transitions, ensuring seamless integration with your styles.

Cons

Legacy Browser Limitations

v1 had issues with Internet Explorer and required polyfills for mutation observers, and v2 may not support very old browsers, as noted in the browser support section.

JavaScript Timing Hassles

When including Stretchy via a script element, setting filters via JavaScript can cause race conditions if not timed correctly, a limitation admitted in the README's filter section.

Spartan API

The API is minimal, which might not suffice for advanced use cases needing more control over resizing logic or event integration.

Frequently Asked Questions

Related Projects

card

:credit_card: make your credit card form better in one line of code

Stars11,714

Forks1,477

Last commit3 years ago

dat.GUI

Lightweight controller library for JavaScript.

Stars7,727

Forks1,056

Last commit2 months ago

form

jQuery Form Plugin

Stars5,147

Forks2,094

Last commit2 years ago

analytics

Lightweight analytics abstraction layer for tracking page views, custom events, & identifying visitors

Stars2,663

Forks267