Tailwind CSS Textarea Auto Height Plugin API

Headless, unstyled Textarea Auto Height plugin built with JavaScript and TypeScript, including installation, usage, options, methods, events, and selectors.

Installation

To get started, install Textarea Auto Height plugin via npm, or skip this step if you are already using Preline UI as a package.

Terminal

                        
                          npm i @preline/textarea-auto-height

Example

A dynamic textarea that automatically adjusts its height based on content.

Basic usage

Prefer to create your own style? Here is a completely unstylized example.

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

JavaScript behavior

Data Options

Name	Description	Options	Default value
`data-hs-textarea-auto-height`	If this attribute is added to the textarea, then automatic height calculation according to the content is enabled. Should be added to the textarea itself.	—	—
`:defaultHeight`	Sets the default height (when no text is entered).	number	`0`

Methods

The HSTextareaAutoHeight object is contained within the global window object

Method	Description
Public methods
`destroy()`	Destroys the instance, removes generated markup (if any), removes added classes and attributes.
Static methods
`HSTextareaAutoHeight.getInstance(target, isInstance)`	Returns the element associated to the `target`. `target` should be a Node or string (valid selector) `isInstance` boolean. Returns the instance instead of Node if `true`

Destroy instance.

                      
                        const { element } = HSTextareaAutoHeight.getInstance('#textarea-autoheight', true);
                        const destroyBtn = document.querySelector('#destroy-btn');
                        
                        destroyBtn.addEventListener('click', () => {
                          element.destroy();
                        });

Demo examples

Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.

Check out Preline UI Components