react-textarea-autosize

by Andarist

component for React which grows with content</p><div class="mt-5 rounded-xl border border-fuchsia-100 bg-fuchsia-50/60 p-4"><p class="flex items-center gap-1.5 font-mono text-[11px] tracking-widest text-fuchsia-700 uppercase"><svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9zM19 15l.9 2.1L22 18l-2.1.9L19 21l-.9-2.1L16 18l2.1-.9z"/></svg>AI summary</p><p class="mt-2 font-semibold">Autosize text area</p><p class="mt-1 text-sm leading-relaxed text-zinc-700">A React component that automatically resizes a textarea as its content changes.</p></div><dl class="mt-6 flex flex-wrap gap-x-8 gap-y-4"><div title="2,250" class="block"><dt class="flex items-center gap-1.5 font-mono text-[11px] tracking-widest text-zinc-500 uppercase group-hover:text-fuchsia-700"><svg class="size-3.5 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>stars</dt><dd class="mt-0.5 font-display text-2xl font-bold tabular-nums">2.3K</dd></div><div title="248" class="block"><dt class="flex items-center gap-1.5 font-mono text-[11px] tracking-widest text-zinc-500 uppercase group-hover:text-fuchsia-700"><svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="6" cy="5" r="2"/><circle cx="18" cy="5" r="2"/><circle cx="12" cy="19" r="2"/><path d="M6 7v1a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3V7M12 11v6"/></svg>forks</dt><dd class="mt-0.5 font-display text-2xl font-bold tabular-nums">248</dd></div><div title="17" class="block"><dt class="flex items-center gap-1.5 font-mono text-[11px] tracking-widest text-zinc-500 uppercase group-hover:text-fuchsia-700"><svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>watching</dt><dd class="mt-0.5 font-display text-2xl font-bold tabular-nums">17</dd></div><a href="#backlinks" title="Awesome lists that link here" class="block group"><dt class="flex items-center gap-1.5 font-mono text-[11px] tracking-widest text-zinc-500 uppercase group-hover:text-fuchsia-700"><svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7"/><path d="M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7"/></svg>awesome list</dt><dd class="mt-0.5 font-display text-2xl font-bold tabular-nums">1</dd></a></dl><div class="mt-6 flex flex-wrap items-center gap-2"><a href="https://github.com/Andarist/react-textarea-autosize" class="inline-flex items-center gap-2 rounded-full bg-zinc-900 px-4 py-2 text-sm font-medium text-white hover:bg-zinc-700"><svg class="size-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5a11.5 11.5 0 0 0-3.64 22.41c.58.1.79-.25.79-.56v-2c-3.2.7-3.88-1.37-3.88-1.37-.52-1.33-1.28-1.69-1.28-1.69-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.17 1.18a11 11 0 0 1 5.77 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.11 3.05.74.81 1.19 1.84 1.19 3.1 0 4.42-2.69 5.39-5.26 5.68.41.36.78 1.06.78 2.14v3.17c0 .31.21.67.8.56A11.5 11.5 0 0 0 12 .5z"></path></svg>View on GitHub</a><a href="http://andarist.github.io/react-textarea-autosize/" rel="noopener nofollow" class="inline-flex items-center gap-2 rounded-full border border-zinc-200 px-4 py-2 text-sm font-medium text-zinc-700 transition-colors hover:border-zinc-300 hover:text-zinc-900"><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg><span class="max-w-56 truncate">andarist.github.io/react-textarea-autosize</span></a><button type="button" onclick="document.getElementById('embed-badge').showModal()" class="inline-flex items-center gap-2 rounded-full border border-zinc-200 py-1.5 pr-4 pl-2 text-sm font-medium text-zinc-700 transition-colors hover:border-zinc-300 hover:text-zinc-900" title="Show the badge in your README"><img src="/shield/Andarist/react-textarea-autosize/links.svg" alt="Awesome Lists badge" class="h-5">Embed badge</button><dialog id="embed-badge" aria-labelledby="embed-badge-title" class="m-auto w-[calc(100%-2rem)] rounded-2xl bg-white p-6 text-zinc-900 shadow-2xl backdrop:bg-black/50 backdrop:backdrop-blur-sm max-w-2xl"><div class="flex items-start justify-between gap-4"><h2 id="embed-badge-title" class="font-display text-xl font-bold">Embed the badge</h2><form method="dialog"><button class="-m-1 rounded-full p-1 text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900" aria-label="Close"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"></path></svg></button></form></div><p class="mt-1 text-sm text-zinc-600">Show how many awesome lists link to your project. The count updates automatically.</p><img src="/shield/Andarist/react-textarea-autosize/links.svg" alt="Awesome Lists badge" class="mt-4 h-5"><div class="mt-5"><div class="flex items-center justify-between"><span class="font-mono text-xs tracking-wide text-zinc-500 uppercase">Markdown</span><button type="button" data-copy="embed-md" class="rounded-full px-3 py-1 font-mono text-xs text-fuchsia-700 hover:bg-fuchsia-50">Copy</button></div><pre id="embed-md" class="mt-1 overflow-x-auto rounded-lg bg-zinc-100 p-3 font-mono text-xs whitespace-pre-wrap break-all text-zinc-800">[](https://awesome.facts.dev/awesome/Andarist/react-textarea-autosize)</pre></div><div class="mt-5"><div class="flex items-center justify-between"><span class="font-mono text-xs tracking-wide text-zinc-500 uppercase">HTML</span><button type="button" data-copy="embed-html" class="rounded-full px-3 py-1 font-mono text-xs text-fuchsia-700 hover:bg-fuchsia-50">Copy</button></div><pre id="embed-html" class="mt-1 overflow-x-auto rounded-lg bg-zinc-100 p-3 font-mono text-xs whitespace-pre-wrap break-all text-zinc-800"><a href="https://awesome.facts.dev/awesome/Andarist/react-textarea-autosize"><img src="https://awesome.facts.dev/shield/Andarist/react-textarea-autosize/links.svg" alt="Awesome Lists Badge" /></a></pre></div><div class="mt-5"><div class="flex items-center justify-between"><span class="font-mono text-xs tracking-wide text-zinc-500 uppercase">Image URL</span><button type="button" data-copy="embed-url" class="rounded-full px-3 py-1 font-mono text-xs text-fuchsia-700 hover:bg-fuchsia-50">Copy</button></div><pre id="embed-url" class="mt-1 overflow-x-auto rounded-lg bg-zinc-100 p-3 font-mono text-xs whitespace-pre-wrap break-all text-zinc-800">https://awesome.facts.dev/shield/Andarist/react-textarea-autosize/links.svg</pre></div></dialog></div><ul class="mt-6 flex flex-wrap gap-1.5"><li><a href="/search?q=javascript" class="block rounded-full bg-zinc-100 px-2.5 py-1 font-mono text-xs text-zinc-600 transition-colors hover:bg-fuchsia-50 hover:text-fuchsia-700">#javascript</a></li><li><a href="/search?q=react" class="block rounded-full bg-zinc-100 px-2.5 py-1 font-mono text-xs text-zinc-600 transition-colors hover:bg-fuchsia-50 hover:text-fuchsia-700">#react</a></li><li><a href="/search?q=react-component" class="block rounded-full bg-zinc-100 px-2.5 py-1 font-mono text-xs text-zinc-600 transition-colors hover:bg-fuchsia-50 hover:text-fuchsia-700">#react-component</a></li></ul></div><aside class="self-start"><a href="http://andarist.github.io/react-textarea-autosize/" rel="noopener nofollow" class="group block overflow-hidden rounded-2xl border border-zinc-200 bg-zinc-50 shadow-sm transition hover:shadow-lg"><img class="aspect-[4/3] w-full animate-pulse bg-zinc-100 object-cover object-top" onload="this.classList.remove('animate-pulse')" onerror="this.remove()" src="https://render.apptornado.com/render?url=http%3A%2F%2Fandarist.github.io%2Freact-textarea-autosize%2F&w=800&h=600&maxAgeSec=604800&signed=fhlpngq7eZuNDw-6FPZL1xGPBGKabX-WXnyjNWyOedU&t=tmji3y" alt="Screenshot of the Andarist/react-textarea-autosize website" width="800" height="600" loading="lazy"><p class="flex items-center gap-2 border-t border-zinc-200 px-4 py-3 font-mono text-xs text-zinc-600 group-hover:text-fuchsia-700"><svg class="size-3.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg><span class="truncate">andarist.github.io/react-textarea-autosize</span></p></a></aside></header><section id="related" class="mt-16 scroll-mt-20"><h2 class="font-display text-2xl font-bold tracking-tight">Similar projects</h2><p class="mt-1 text-sm text-zinc-500">Found by comparing what the projects do, not just their names.</p><ul class="mt-5 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3"><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/andrico1234/autosize-textarea" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/17087167?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">andrico1234/</span><span class="font-semibold">autosize-textarea</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>33</span></div><p class="mt-3 text-sm font-semibold">Textarea resizer</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A textarea component that automatically resizes to fit its content</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/stevepapa/angular2-autosize" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/5373095?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">stevepapa/</span><span class="font-semibold">angular2-autosize</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>118</span></div><p class="mt-3 text-sm font-semibold">Auto-textarea size</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">An Angular2 directive that automatically adjusts textarea height to fit content.</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/jedwatson/react-input-autosize" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/872310?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">jedwatson/</span><span class="font-semibold">react-input-autosize</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>769</span></div><p class="mt-3 text-sm font-semibold">Input auto-resizer</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A React component that automatically resizes its input field based on its content</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/inokawa/rich-textarea" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/48897392?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">inokawa/</span><span class="font-semibold">rich-textarea</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>343</span></div><p class="mt-3 text-sm font-semibold">Rich Textarea</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A customizable textarea for React with rich text editing features and integration with various libraries and frameworks.</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/exogen/react-typesetting" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/53522?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">exogen/</span><span class="font-semibold">react-typesetting</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>81</span></div><p class="mt-3 text-sm font-semibold">Text spacer</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">Provides React components for fine-tuning text typography and layout to achieve optimal spacing between words, letters, and font sizes.</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/hfalucas/vue-autosizer" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/7132610?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">hfalucas/</span><span class="font-semibold">vue-autosizer</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>5</span></div><p class="mt-3 text-sm font-semibold">Content adjuster</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">Automatically adjusts textarea and input elements to fit their content</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/erchenger/sizeadjustingtextview" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/1662932?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">erchenger/</span><span class="font-semibold">sizeadjustingtextview</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>252</span></div><p class="mt-3 text-sm font-semibold">Auto-sizing text view</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">Preserves and refactors an open source autosizing text view for Android</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/dualwield/auto-size-transition" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/4132470?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">dualwield/</span><span class="font-semibold">auto-size-transition</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>9</span></div><p class="mt-3 text-sm font-semibold">AutoSize Transition</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A React component that scales its size dynamically based on the content it contains.</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/simc/auto_size_text" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/13610195?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">simc/</span><span class="font-semibold">auto_size_text</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>2.1K</span></div><p class="mt-3 text-sm font-semibold">TextSizer</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A Flutter widget that automatically resizes text to fit within its bounds.</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/kierianlee/react-autowidth-input" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/60668038?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">kierianlee/</span><span class="font-semibold">react-autowidth-input</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>14</span></div><p class="mt-3 text-sm font-semibold">Input field</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">Automatically sized input field component with customizable properties and extensibility options</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/amarcruz/react-native-text-size" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/6636980?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">amarcruz/</span><span class="font-semibold">react-native-text-size</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>405</span></div><p class="mt-3 text-sm font-semibold">Text measurer</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">Measures text layout and provides font information for React Native apps</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/leaverou/stretchy" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/175836?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">leaverou/</span><span class="font-semibold">stretchy</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>1.3K</span></div><p class="mt-3 text-sm font-semibold">Form autosizer</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">Automatically adjusts form elements to fit available space without user intervention.</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/airamrguez/react-native-measure-text" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/1159448?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">airamrguez/</span><span class="font-semibold">react-native-measure-text</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>117</span></div><p class="mt-3 text-sm font-semibold">Text measurer</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A React Native library for measuring text size without layout</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/aeagle/react-spaces" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/369518?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">aeagle/</span><span class="font-semibold">react-spaces</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>1.3K</span></div><p class="mt-3 text-sm font-semibold">Layout library</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A React component library for creating flexible and responsive layouts in web applications.</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/ctrlplusb/react-sizeme" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/12164768?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">ctrlplusb/</span><span class="font-semibold">react-sizeme</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>1.9K</span></div><p class="mt-3 text-sm font-semibold">Component sizing library for React</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A library that provides responsive design capabilities to React components by making them aware of their size and triggering recalculations at a specified frequency.</p></li></ul></section><section id="backlinks" class="mt-16 scroll-mt-20"><h2 class="font-display text-2xl font-bold tracking-tight">Featured in 1 awesome list</h2><p class="mt-1 text-sm text-zinc-500">Each link jumps to the spot where the list mentions react-textarea-autosize.</p><ul class="mt-5 grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3"><li class="flex min-w-0 items-center gap-2 rounded-xl border border-zinc-200 px-3 py-2.5 text-sm transition-colors hover:border-fuchsia-600"><a href="/awesome/brillout/awesome-react-components#Andarist/react-textarea-autosize" class="group inline-flex min-w-0 items-center gap-2 flex-1"><img src="https://avatars.githubusercontent.com/u/1005638?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">brillout/</span><span class="font-semibold">awesome-react-components</span></span></a></li></ul></section></main></div><footer class="border-t border-zinc-200 bg-zinc-50"><div class="mx-auto flex max-w-6xl flex-col gap-4 px-4 py-8 text-sm sm:flex-row sm:items-start sm:justify-between"><div><a href="/" class="flex items-center gap-2 font-display text-lg font-bold tracking-tight"><img loading="lazy" src="/favicon.png" width="22" height="22" alt=""><span>Awesome <span class="text-fuchsia-600">Lists</span></span></a><p class="mt-2 text-zinc-500">Awesome links for awesome devs. © 2026 awesome.facts.dev</p><p class="mt-2 font-mono text-xs text-zinc-500">press <kbd class="rounded border border-zinc-300 px-1">/</kbd> to search</p></div><ul class="flex flex-wrap gap-x-5 gap-y-2"><li><a href="/about" class="text-zinc-600 hover:text-fuchsia-700">About</a></li><li><a href="/search" class="text-zinc-600 hover:text-fuchsia-700">Search</a></li><li><a href="https://www.facts.dev" class="text-zinc-600 hover:text-fuchsia-700">facts.dev</a></li><li><a href="https://news.facts.dev" class="text-zinc-600 hover:text-fuchsia-700">Smart News</a></li><li><a href="https://bluefacts.app/" class="text-zinc-600 hover:text-fuchsia-700">BlueFacts</a></li><li><a href="https://freeappy.com" class="text-zinc-600 hover:text-fuchsia-700">FreeAppy games</a></li></ul></div></footer><dialog id="add-project" aria-labelledby="add-project-title" class="m-auto w-[calc(100%-2rem)] rounded-2xl bg-white p-6 text-zinc-900 shadow-2xl backdrop:bg-black/50 backdrop:backdrop-blur-sm max-w-md"><div class="flex items-start justify-between gap-4"><h2 id="add-project-title" class="font-display text-xl font-bold">Add a GitHub project</h2><form method="dialog"><button class="-m-1 rounded-full p-1 text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900" aria-label="Close"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"></path></svg></button></form></div><p class="mt-1 text-sm text-zinc-600">Missing a project or an awesome list? Paste its GitHub URL and we fetch it right away.</p><form class="mt-4"><label for="project-url" class="font-mono text-xs tracking-wide text-zinc-500 uppercase">Project URL</label><input id="project-url" type="url" required placeholder="https://github.com/owner/repo" class="mt-1 w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-zinc-900 placeholder:text-zinc-400 focus:border-fuchsia-600 focus:outline-none"><p data-error class="mt-2 text-sm text-red-700" aria-live="polite"></p><div class="mt-4 flex justify-end gap-2 text-sm"><button type="button" data-close class="rounded-full px-4 py-1.5 text-zinc-600 hover:bg-zinc-100">Cancel</button><button type="submit" class="rounded-full bg-zinc-900 px-4 py-1.5 font-medium text-white disabled:opacity-50">Add project</button></div></form></dialog><script type="module" src="/_astro/Layout.astro_astro_type_script_index_0_lang.CNPGAtk_.js"></script></body></html>