autoheight-textarea


autoheight-textarea is a small (7kb gzipped) HTML5 custom element wrapper around textarea elements that will automatically resize itself as the user types.

It works everywhere, because it's implemented as a custom element. Including: Virtual DOMs (React, Elm, etc.), server-side rendered HTML and, of course, good old index.html files.

The component will respect any minimum height set on the textarea via the rows attribute.

Demo

!Example gif

Code sandboxes

- Basic HTML: https://codesandbox.io/s/unruffled-http-2vm4c
- React.js: https://codesandbox.io/s/misty-violet-p1jwb

Example usage

For any of the following examples, all you need to do is include the script. For example, you could add this to the top of your main JS file:

``JavaScript
import "autoheight-textarea";

// Your code here... React, jQuery, whatever
`

React
`JavaScript
const App = () => {
return (

<br /> </autoheight-textarea><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>HTML / PHP</strong><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">HTML<br /><autoheight-textarea><br /> <textarea placeholder="Type something..." rows="4">

`

Elm
`Elm
Html.node "autoheight-textarea" [] [
textarea [ placeholder "Type something..." , rows 4 ] []
]
`

Feel free to add any other elements inside of the autoheight-textarea node. For instance, you could implement a Bootstrap textarea with form help text like so:

`HTML



`

Why would you do that? Mostly because it makes things easier to select with CSS. For instance you might want to hide the help text until the textarea has focus.
`CSS
textarea:not(:focus) + .form-text {
display: none;
}
``

Browser support

All major browsers — including IE11.

This package uses @webcomponents/custom-elements under the hood.