Alpine JS Textarea Grow

Alpine JS plugin x-grow adds in auto grow functionality to </code><br />elements 🌳</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Example</h2></p><p class="my-3">``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><textarea x-data x-grow>
`

This <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> will now grow with the content.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Install</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><script<br /> defer<br /> src="https://unpkg.com/alpinejs-textarea-grow@1.x.x/dist/grow.min.js"<br />></script></p><p class="my-3"><script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">shell<br />npm i -D alpinejs-textarea-grow</p><p class="my-3">yarn add -D alpinejs-textarea-grow<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Then you can register the plugin.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />import Alpine from 'alpinejs'<br />import grow from 'alpinejs-textarea-grow'</p><p class="my-3">Alpine.plugin(grow)</p><p class="my-3">window.Alpine = Alpine</p><p class="my-3">Alpine.start()<br /></code>``</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"><br /><br /><br /><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:3"></template></div></div></div><div hidden id="S:3"><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=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><script>$RC("B:1","S:1")</script></body></html>