1. Docs
  2. Auto Resize Area

Auto-Resize Textarea

Automatically adjusting the height of text areas based on the content.

The Auto-Resize TextArea component automatically adjusts its height to fit the user’s input, removing the need for scrollbars and improving multiline text entry.

Installation

To add auto-resizing functionality to your textarea, install the package: 
npm i @flexilla/auto-resize-area

Usage

HTML Structure

To make a textarea auto-resizable, use a basic HTML structure like this: 
<!-- TextArea Element -->
<textarea id="myTextarea" placeholder="Type something..."></textarea>

Initialization

You can initialize the component programmatically by passing the textarea element or its selector: 
import { AutoResizeTextArea } from '@flexilla/auto-resize-area';

const autoResizingTextarea = new AutoResizeTextArea('#myTextarea');
Once initialized, the textarea will dynamically resize based on its content, ensuring a smooth user experience without scrollbars.
You can also define height limits with data attributes: 
<textarea
  id="myTextarea"
  data-min-height="40"
  data-max-height="240"
></textarea>

Full Example

Here’s a full example demonstrating how to set up and use the AutoResize component: 
<!-- TextArea Element -->
<textarea id="myTextarea" rows="1" placeholder="Start typing..."></textarea>

<script type="module">
  import { AutoResizeTextArea } from '@flexilla/auto-resize-area';
  
  // Enable auto-resize functionality on the textarea
  const myTextarea = new AutoResizeTextArea('#myTextarea');
</script>

Methods

cleanup()

Remove the input and resize listeners when the instance is no longer needed. 
autoResizingTextarea.cleanup();

autoInit()

Initialize all matching textareas automatically. By default, AutoResizeTextArea.autoInit() looks for [data-fx-autoresize]. 
import { AutoResizeTextArea } from "@flexilla/auto-resize-area";

AutoResizeTextArea.autoInit();
// or
AutoResizeTextArea.autoInit(".auto-resize-textarea");