fit-textarea [![][badge-gzip]](#link-npm)

[badge-gzip]: https://img.shields.io/bundlephobia/minzip/fit-textarea.svg?label=gzipped
[link-npm]: https://www.npmjs.com/package/fit-textarea

> Automatically expand a </code> to fit its content, in a few bytes</p><p class="my-3">Try the <a href="https://fregante.github.io/fit-textarea/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">demo</a>!</p><p class="my-3">Features:</p><p class="my-3">- Small<br />- No layout thrashing (no DOM changes unless necessary)<br />- You can set a minimum height (via <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">rows</code> attribute or <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">height</code> CSS property)<br />- If the field is resizable, the new size will be treated as minimum height</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Install</h2></p><p class="my-3">``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />npm install fit-textarea<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Setup</h2></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />// This module is only offered as a ES Module<br />import fitTextarea from 'fit-textarea';<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><textarea rows="3">Use the rows attribute to set its minimum height
`

Usage

$3

`js
const textarea = document.querySelector('textarea');
fitTextarea(textarea);
`

$3

#### One element

`js
const textarea = document.querySelector('textarea');
fitTextarea.watch(textarea);
`

#### Array/NodeList/Iterable of elements

`js
const textareas = document.querySelectorAll('textarea');
fitTextarea.watch(textareas);
`

#### With a selector

The selector is run once, so it's equivalent to the example above.

`js
fitTextarea.watch('textarea');
`

Related

- indent-textarea - Add editor-like tab-to-indent functionality to , in a few bytes.<br />- <a href="https://github.com/fregante/delegate-it" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">delegate-it</a> - DOM event delegation, in <1KB. Can be used to attach one </code>fit-textarea` to many elements.<br />- <a href="https://github.com/sindresorhus/refined-github" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Refined GitHub</a> - Uses this module.<br /></p></div></div></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"2c:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n2d:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.2.2\"}]\n2e:[\"$\",\"$L5\",\"tape-run\",{\"href\":\"/package/tape-run\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"tape-run\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^8.0.0\"}]]}]\n2f:[\"$\",\"$L5\",\"typescript\",{\"href\":\"/package/typescript\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"typescript\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.2.3\"}]]}]\n30:[\"$\",\"$L5\",\"xo\",{\"href\":\"/package/xo\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"xo\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.38.2\"}]]}]\n"])</script><div hidden id="S:3"><div class="rounded-lg border p-3"><h4 class="mb-2 text-sm font-medium">Dist Tags</h4><div class="space-y-1"><div class="flex justify-between text-sm"><span class="text-muted-foreground">latest</span><a class="font-mono text-xs hover:underline" href="/package/fit-textarea/v/3.0.0">3.0.0</a></div><div class="flex justify-between text-sm"><span class="text-muted-foreground">next</span><a class="font-mono text-xs hover:underline" href="/package/fit-textarea/v/2.0.0-0">2.0.0-0</a></div></div></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>