or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-autosize

Autosize is a small, stand-alone script to automatically adjust textarea height to fit text.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/autosize@6.0.x

To install, run

npx @tessl/cli install tessl/npm-autosize@6.0.0

index.mddocs/

Autosize

Autosize is a small, stand-alone script to automatically adjust textarea height to fit text. It provides seamless autogrow functionality for textarea elements without any dependencies, making it ideal for comment systems, message composers, and form interfaces where content length varies.

Package Information

  • Package Name: autosize
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install autosize

Core Imports

import autosize from 'autosize';

For CommonJS:

const autosize = require('autosize');

For browser environments (UMD):

<script src="node_modules/autosize/dist/autosize.min.js"></script>
<!-- autosize is available globally -->

Basic Usage

import autosize from 'autosize';

// Single textarea element
const textarea = document.querySelector('textarea');
autosize(textarea);

// Multiple textarea elements from NodeList
autosize(document.querySelectorAll('textarea'));

// With jQuery collection
autosize($('textarea'));

// Remove autosize behavior
autosize.destroy(textarea);

// Trigger manual resize calculation
autosize.update(textarea);

Architecture

Autosize operates through DOM event listeners and style calculations:

  • Element Tracking: Uses internal Map to track which elements have autosize enabled
  • Event Handling: Listens to input and resize events for automatic height adjustment
  • Style Calculation: Uses getComputedStyle and scrollHeight to determine required height
  • Browser Compatibility: Provides no-op functions in Node.js environments
  • Memory Management: Properly cleans up event listeners and internal references on destroy

Capabilities

Main Function

Initialize autosize behavior on textarea element(s).

/**
 * Automatically adjusts textarea height to fit content
 * @param element - Single textarea element, NodeList, Array, or jQuery collection
 * @param options - Reserved for future use (currently ignored)
 * @returns The same element(s) passed in (chainable)
 */
function autosize(element: HTMLTextAreaElement | NodeList | Array | any, options?: any): any;

Usage Examples:

// Single element
const textarea = document.getElementById('comment');
autosize(textarea);

// Multiple elements
const textareas = document.querySelectorAll('.auto-resize');
autosize(textareas);

// With jQuery
autosize($('.message-input'));

// Chaining
autosize(document.querySelectorAll('textarea')).forEach(el => {
  el.placeholder = 'Type your message...';
});

Destroy Method

Remove autosize behavior from textarea element(s) and restore original styles.

/**
 * Removes autosize behavior from textarea element(s)
 * @param element - Single textarea element, NodeList, Array, or jQuery collection
 * @returns The same element(s) passed in (chainable)
 */
autosize.destroy(element: HTMLTextAreaElement | NodeList | Array | any): any;

Usage Examples:

// Remove from single element
autosize.destroy(textarea);

// Remove from multiple elements
autosize.destroy(document.querySelectorAll('.auto-resize'));

// Conditional cleanup
if (shouldDisableAutosize) {
  autosize.destroy(textarea);
}

Update Method

Manually trigger height recalculation for textarea element(s).

/**
 * Manually triggers height recalculation for textarea element(s)
 * @param element - Single textarea element, NodeList, Array, or jQuery collection
 * @returns The same element(s) passed in (chainable)
 */
autosize.update(element: HTMLTextAreaElement | NodeList | Array | any): any;

Usage Examples:

// Force update after programmatic content change
textarea.value = 'New content added programmatically';
autosize.update(textarea);

// Update all autosize textareas
autosize.update(document.querySelectorAll('textarea'));

// Update after showing/hiding parent container
document.getElementById('form-container').style.display = 'block';
autosize.update(document.querySelectorAll('textarea'));

Events

autosize:resized Event

Custom event dispatched when textarea height changes.

/**
 * Custom event fired when textarea height is automatically adjusted
 * Event properties: { bubbles: true }
 * Target: The textarea element that was resized
 */

Usage Example:

textarea.addEventListener('autosize:resized', function(event) {
  console.log('Textarea resized:', event.target);
  // Handle resize event - update scroll position, adjust layouts, etc.
});

Environment Handling

Autosize provides different behavior based on the execution environment:

Browser Environment:

  • Full DOM manipulation and event handling
  • Automatic height adjustment based on content
  • Event listener management and cleanup

Node.js Environment:

  • No-op functions that return elements unchanged
  • Prevents errors during server-side rendering
  • Maintains API compatibility across environments
// All methods work safely in both environments
if (typeof window !== 'undefined') {
  // Browser: full functionality
  autosize(textarea); // Enables auto-resizing
} else {
  // Node.js: no-op functions
  autosize(textarea); // Returns textarea unchanged
}

Types

// Input types - accepts various element collections
type AutosizeInput = HTMLTextAreaElement | NodeList | Array<HTMLTextAreaElement> | any;

// All methods return the same input for chaining
type AutosizeOutput = AutosizeInput;