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 enhancing the experience when working with multiline text fields. This ensures that users don’t have to resize or scroll within the textarea.

Installation

To add auto-resizing functionality to your textarea, install the AutoResize component via npm (or any other package manager): 
npm i @flexilla/autoresize

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 AutoResize component programmatically by passing the textarea element or its selector: 
import { AutoResize } from '@flexilla/autoresize';

// Initialize AutoResize on the textarea element
const autoResizingTextarea = new AutoResize('#myTextarea');
Once initialized, the textarea will dynamically resize based on its content, ensuring a smooth user experience without scrollbars.

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 { AutoResize } from '@flexilla/autoresize';
  
  // Enable auto-resize functionality on the textarea
  const myTextarea = new AutoResize('#myTextarea');
</script>