Custom element for automatically resizing textareas. Works everywhere: Virtual DOM and plain HTML
npm install 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.
Code sandboxes
- Basic HTML: https://codesandbox.io/s/unruffled-http-2vm4c
- React.js: https://codesandbox.io/s/misty-violet-p1jwb
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 (
);
}
HTML / PHP
`HTML`
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`
This is what a Bootstrap textarea looks like
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;
}
All major browsers — including IE11.
This package uses @webcomponents/custom-elements under the hood.