Tailwind CSS Textarea Autoheight

Automatically sets the height of the textarea.

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

Example

Basic example.

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