yo-yo-autogrow

![npm]()
!API stability
!MIT Licensed

Wrapper </code> UI Component made from <a href="https://github.com/maxogden/yo-yo" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">yo-yo</a></p><p class="my-3">!<a href="capture.gif" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">capture</a></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Usage</h2></p><p class="my-3">``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />const autogrow = require('yo-yo-autogrow')</p><p class="my-3">const el = yo</code><div><br /> ${autogrow({<br /> required: true,<br /> placeholder: 'enter...'<br /> })}<br /></div><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">with <a href="https://github.com/yoshuawuyts/choo" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Choo</a></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />const choo = require('choo')<br />const html = require('choo/html')<br />const autogrow = require('yo-yo-autogrow')</p><p class="my-3">const app = choo()</p><p class="my-3">app.model({<br /> state: {title: 'Sample with choo'}<br />})</p><p class="my-3">const mainView = (state) => html</code><br /> <main><br /> <div><br /> <h1>${state.title}</h1><br /> <form><br /> ${autogrow()}<br /> </form><br /> </div><br /> </main><br /><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">document.body.appendChild(tree)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">| Property | Default |<br />| :-- | :-- |<br />| placeholder | </code>''<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| value | </code>''<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| name | </code>''<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| disabled | </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| required | </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| inputmode | </code>''<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| autocomplete | </code>'off'<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">| Property | Default |<br />| :-- | :-- |<br />| </code>--AutogrowTextarea-border<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>1px solid #ddd<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| </code>--AutogrowTextarea-border-focus<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>1px solid #9cc<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| </code>--AutogrowTextarea-width<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>100%<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| </code>--AutogrowTextarea-padding<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>4px 6px` |<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><script>self.__next_f.push([1,"26:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.1.8\"}]\n"])</script><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>