@preline/textarea-auto-height

Textarea Autoheight

Automatically sets the height of the textarea.

Contents

• Overview
• Installation
• Basic usage
• Configuration Options
• JavaScript API
• Common Patterns
• License

Overview

The Textarea Autoheight component automatically adjusts the height of a textarea element based on its content. As users type, the textarea expands or contracts to fit the text, eliminating the need for scrollbars.

Key Features:

• Automatic height adjustment based on content
• Smooth resizing as user types
• Configurable default height
• Programmatic control via JavaScript API
• No scrollbars needed

Installation

To get started, install Textarea Autoheight plugin via npm, else you can skip this step if you are already using Preline UI as a package.

npm i @preline/textarea-auto-height

CSS

@import the plugin's CSS file into your Tailwind CSS file.

@import "tailwindcss";

/* @preline/textarea-auto-height */
@import "./node_modules/@preline/textarea-auto-height/theme.css";

JavaScript

Include the JavaScript that powers the interactive elements near the end of your </body> tag:

<script src="./node_modules/@preline/textarea-auto-height/index.js"></script>

Manual Initialization

Use the non-auto entry if you need manual initialization. In this mode, automatic initialization on page load is not included, so the component should be initialized explicitly.

<script type="module">
  import HSTextareaAutoHeight from "@preline/textarea-auto-height/non-auto.mjs";

  new HSTextareaAutoHeight(document.querySelector("#textarea"));
</script>

Via Bundler

When using a bundler (Vite, webpack, etc.), import the plugin directly as an ES module.

@preline/textarea-auto-height is the auto-init entry: it scans the DOM and initializes matching elements automatically.

import "@preline/textarea-auto-height";

@preline/textarea-auto-height/non-auto is the manual entry: use it when you want explicit control over when initialization happens, either via autoInit() or by creating a specific instance yourself.

import HSTextareaAutoHeight from "@preline/textarea-auto-height/non-auto";

HSTextareaAutoHeight.autoInit();

// Or initialize a specific element manually
const el = document.querySelector("#textarea");
if (el) new HSTextareaAutoHeight(el);

TypeScript

This package ships with TypeScript type definitions. No additional @types/ package is needed.

Basic usage

The following example demonstrates the minimal HTML structure required for a textarea autoheight component. This is a base template without custom styling - you can apply your own CSS classes and styles as needed. The textarea automatically adjusts its height as content is entered.

<textarea data-hs-textarea-auto-height></textarea>

Structure Requirements:

• data-hs-textarea-auto-height: Required on the textarea element
• Standard <textarea> element

Initial State:

• Textarea starts at default height (or configured defaultHeight)
• Height adjusts automatically as content is entered or removed

Configuration Options

Data Options

Data options are specified in the data-hs-textarea-auto-height attribute.

Example:

<textarea data-hs-textarea-auto-height='{
  "defaultHeight": 50
}'></textarea>

JavaScript API

The HSTextareaAutoHeight object is available in the global window object after the plugin is loaded.

Instance Methods

These methods are called on a textarea autoheight instance.

Static Methods

These methods are called directly on the HSTextareaAutoHeight class.

Usage Examples

Example 1: Destroying textarea autoheight instance

const instance = HSTextareaAutoHeight.getInstance('#hs-textarea-autoheight', true);

if (instance) {
  const { element } = instance;
  const destroyBtn = document.querySelector('#hs-destroy-btn');

  destroyBtn.addEventListener('click', () => {
    element.destroy();
  });
}

Example 2: Getting instance and accessing properties

// Get the textarea autoheight instance
const instance = HSTextareaAutoHeight.getInstance('#hs-textarea-autoheight', true);

if (instance) {
  const { element } = instance;

  // Access instance properties
  console.log('Default height:', element.defaultHeight);

  // Clean up when removing from DOM
  function removeTextareaAutoheight() {
    element.destroy();
  }
}

Example 3: Destroying textarea autoheight instance

const instance = HSTextareaAutoHeight.getInstance('#hs-textarea-autoheight', true);

if (instance) {
  const { element } = instance;
  const removeBtn = document.querySelector('#hs-remove-btn');

  removeBtn.addEventListener('click', () => {
    // Clean up before removing from DOM
    element.destroy();
    // Now safe to remove the element
    document.querySelector('#hs-textarea-autoheight').remove();
  });
}

Common Patterns

Pattern 1: Custom Default Height

Set a custom default height for the textarea.

<textarea data-hs-textarea-auto-height='{
  "defaultHeight": 100
}'></textarea>

Pattern 2: Multiple Autoheight Textareas

Apply autoheight to multiple textareas.

<textarea id="hs-comment-first" data-hs-textarea-auto-height></textarea>
<textarea id="hs-comment-second" data-hs-textarea-auto-height></textarea>

License

Copyright (c) 2024 Htmlstream.

Licensed under the MIT License.