react-textarea-autosize

A React component that automatically resizes a textarea as its content changes.

component for React which grows with content</p> <p><a href="https://github.com/Andarist/react-textarea-autosize">GitHub</a></p> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();;(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script> <a href="#backlinks"><img src="/shield/Andarist/react-textarea-autosize/links.svg" class="my-1"></a> <astro-island uid="Z1Wl524" component-url="/_astro/Embed.Q9Y0TSIU.js" component-export="default" renderer-url="/_astro/client-v5.B68pIK7B.js" props="{"ownerRepo":[0,"Andarist/react-textarea-autosize"]}" ssr="" client="load" opts="{"name":"Embed","value":true}" await-children=""><!--[-->^{<button class="btn btn-link fw-light" style="font-size: 0.8rem;">[Embed]</button>} <!--[!--><!--]--> <!--[--><!----><div><!----><!--[!--><!--]--><!----></div><!----><!--]--><!----><!--]--><!--astro:end--></astro-island> <div><b>2k</b> stars</div> <div><b>17 </b>watching</div> <div><b>249 </b>forks</div> <div> Language: <b>TypeScript</b> </div> last commit: <b>10 days ago</b> <div> Linked from <a href="#backlinks"> 1 awesome list </a> </div> <br> <div class="topics"> <span>javascript</span><span>react</span><span>react-component</span> </div> <br> </div> <div class="col-md-5"> <div class="card m-3 placeholder-glow"> <a href="http://andarist.github.io/react-textarea-autosize/" rel="noopener nofollow"> <img class="card-img-top rounded-lg-3 img-fluid w-100 placeholder" id="main" onload="this.classList.remove("placeholder");" 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" alt="Screenshot of Andarist/react-textarea-autosize website" width="800" height="600" loading="lazy"> </a> <div class="card-body"> <p class="card-text"> <a href="http://andarist.github.io/react-textarea-autosize/" rel="noopener nofollow"> andarist.github.io/react-textarea-autosize/ </a> </p> </div> </div> </div> </div> <div> <a name="backlinks"></a> <h2>Backlinks from these awesome lists:</h2> <ul> <li> <a href="/awesome/brillout/awesome-react-components#Andarist/react-textarea-autosize" data-astro-cid-qwhla4fl> <img src="https://avatars.githubusercontent.com/u/1005638?v=4" class="icon rounded m-1" loading="lazy" data-astro-cid-qwhla4fl> brillout/awesome-react-components</a> </li> </ul> </div> <div> <a name="related"></a> <h2>Related projects:</h2> <div class="table-responsive" data-astro-cid-iowmqt5b> <table class="table table-sm" id="projects" data-astro-cid-iowmqt5b> <thead data-astro-cid-iowmqt5b> <tr data-astro-cid-iowmqt5b> <th data-astro-cid-iowmqt5b>Repository</th> <th data-astro-cid-iowmqt5b>Description</th> <th data-astro-cid-iowmqt5b>Stars</th> </tr> </thead> <tbody data-astro-cid-iowmqt5b> <tr data-astro-cid-iowmqt5b> <td data-astro-cid-iowmqt5b> <a href="/awesome/andrico1234/autosize-textarea" data-astro-cid-qwhla4fl> <img src="https://avatars.githubusercontent.com/u/17087167?v=4" class="icon rounded m-1" loading="lazy" data-astro-cid-qwhla4fl> andrico1234/autosize-textarea</a> </td> <td class="desc" data-astro-cid-iowmqt5b> A textarea component that automatically resizes to fit its content </td> <td class="num" data-astro-cid-iowmqt5b>33</td> </tr><tr data-astro-cid-iowmqt5b> <td data-astro-cid-iowmqt5b> <a href="/awesome/stevepapa/angular2-autosize" data-astro-cid-qwhla4fl> <img src="https://avatars.githubusercontent.com/u/5373095?v=4" class="icon rounded m-1" loading="lazy" data-astro-cid-qwhla4fl> stevepapa/angular2-autosize</a> </td> <td class="desc" data-astro-cid-iowmqt5b> An Angular2 directive that automatically adjusts textarea height to fit content. </td> <td class="num" data-astro-cid-iowmqt5b>118</td> </tr><tr data-astro-cid-iowmqt5b> <td data-astro-cid-iowmqt5b> <a href="/awesome/jedwatson/react-input-autosize" data-astro-cid-qwhla4fl> <img src="https://avatars.githubusercontent.com/u/872310?v=4" class="icon rounded m-1" loading="lazy" data-astro-cid-qwhla4fl> jedwatson/react-input-autosize</a> </td> <td class="desc" data-astro-cid-iowmqt5b> A React component that automatically resizes its input field based on its content </td> <td class="num" data-astro-cid-iowmqt5b>769</td> </tr><tr data-astro-cid-iowmqt5b> <td data-astro-cid-iowmqt5b> <a href="/awesome/inokawa/rich-textarea" data-astro-cid-qwhla4fl> <img src="https://avatars.githubusercontent.com/u/48897392?v=4" class="icon rounded m-1" loading="lazy" data-astro-cid-qwhla4fl> inokawa/rich-textarea</a> </td> <td class="desc" data-astro-cid-iowmqt5b> A customizable textarea for React with rich text editing features and integration with various libraries and frameworks. </td> <td class="num" data-astro-cid-iowmqt5b>317</td> </tr><tr data-astro-cid-iowmqt5b> <td data-astro-cid-iowmqt5b> <a href="/awesome/exogen/react-typesetting" data-astro-cid-qwhla4fl> <img src="https://avatars.githubusercontent.com/u/53522?v=4" class="icon rounded m-1" loading="lazy" data-astro-cid-qwhla4fl> exogen/react-typesetting</a> </td> <td class="desc" data-astro-cid-iowmqt5b> Provides React components for fine-tuning text typography and layout to achieve optimal spacing between words, letters, and font sizes. </td> <td class="num" data-astro-cid-iowmqt5b>81</td> </tr><tr data-astro-cid-iowmqt5b> <td data-astro-cid-iowmqt5b> <a href="/awesome/hfalucas/vue-autosizer" data-astro-cid-qwhla4fl> <img src="https://avatars.githubusercontent.com/u/7132610?v=4" class="icon rounded m-1" loading="lazy" data-astro-cid-qwhla4fl> hfalucas/vue-autosizer</a> </td> <td class="desc" data-astro-cid-iowmqt5b> Automatically adjusts textarea and input elements to fit their content </td> <td class="num" data-astro-cid-iowmqt5b>5</td> </tr><tr data-astro-cid-iowmqt5b> <td data-astro-cid-iowmqt5b> <a href="/awesome/erchenger/sizeadjustingtextview" data-astro-cid-qwhla4fl> <img src="https://avatars.githubusercontent.com/u/1662932?v=4" class="icon rounded m-1" loading="lazy" data-astro-cid-qwhla4fl> erchenger/sizeadjustingtextview</a> </td> <td class="desc" data-astro-cid-iowmqt5b> Preserves and refactors an open source autosizing text view for Android </td> <td class="num" data-astro-cid-iowmqt5b>252</td> </tr><tr data-astro-cid-iowmqt5b> <td data-astro-cid-iowmqt5b> <a href="/awesome/dualwield/auto-size-transition" data-astro-cid-qwhla4fl> <img src="https://avatars.githubusercontent.com/u/4132470?v=4" class="icon rounded m-1" loading="lazy" data-astro-cid-qwhla4fl> dualwield/auto-size-transition</a> </td> <td class="desc" data-astro-cid-iowmqt5b> A React component that scales its size dynamically based on the content it contains. </td> <td class="num" data-astro-cid-iowmqt5b>9</td> </tr><tr data-astro-cid-iowmqt5b> <td data-astro-cid-iowmqt5b> <a href="/awesome/simc/auto_size_text" data-astro-cid-qwhla4fl> <img src="https://avatars.githubusercontent.com/u/13610195?v=4" class="icon rounded m-1" loading="lazy" data-astro-cid-qwhla4fl> simc/auto_size_text</a> </td> <td class="desc" data-astro-cid-iowmqt5b> A Flutter widget that automatically resizes text to fit within its bounds. </td> <td class="num" data-astro-cid-iowmqt5b>2,057</td> </tr><tr data-astro-cid-iowmqt5b> <td data-astro-cid-iowmqt5b> <a href="/awesome/kierianlee/react-autowidth-input" data-astro-cid-qwhla4fl> <img src="https://avatars.githubusercontent.com/u/60668038?v=4" class="icon rounded m-1" loading="lazy" data-astro-cid-qwhla4fl> kierianlee/react-autowidth-input</a> </td> <td class="desc" data-astro-cid-iowmqt5b> Automatically sized input field component with customizable properties and extensibility options </td> <td class="num" data-astro-cid-iowmqt5b>14</td> </tr><tr data-astro-cid-iowmqt5b> <td data-astro-cid-iowmqt5b> <a href="/awesome/amarcruz/react-native-text-size" data-astro-cid-qwhla4fl> <img src="https://avatars.githubusercontent.com/u/6636980?v=4" class="icon rounded m-1" loading="lazy" data-astro-cid-qwhla4fl> amarcruz/react-native-text-size</a> </td> <td class="desc" data-astro-cid-iowmqt5b> Measures text layout and provides font information for React Native apps </td> <td class="num" data-astro-cid-iowmqt5b>404</td> </tr><tr data-astro-cid-iowmqt5b> <td data-astro-cid-iowmqt5b> <a href="/awesome/leaverou/stretchy" data-astro-cid-qwhla4fl> <img src="https://avatars.githubusercontent.com/u/175836?v=4" class="icon rounded m-1" loading="lazy" data-astro-cid-qwhla4fl> leaverou/stretchy</a> </td> <td class="desc" data-astro-cid-iowmqt5b> Automatically adjusts form elements to fit available space without user intervention. </td> <td class="num" data-astro-cid-iowmqt5b>1,274</td> </tr><tr data-astro-cid-iowmqt5b> <td data-astro-cid-iowmqt5b> <a href="/awesome/airamrguez/react-native-measure-text" data-astro-cid-qwhla4fl> <img src="https://avatars.githubusercontent.com/u/1159448?v=4" class="icon rounded m-1" loading="lazy" data-astro-cid-qwhla4fl> airamrguez/react-native-measure-text</a> </td> <td class="desc" data-astro-cid-iowmqt5b> A React Native library for measuring text size without layout </td> <td class="num" data-astro-cid-iowmqt5b>117</td> </tr><tr data-astro-cid-iowmqt5b> <td data-astro-cid-iowmqt5b> <a href="/awesome/aeagle/react-spaces" data-astro-cid-qwhla4fl> <img src="https://avatars.githubusercontent.com/u/369518?v=4" class="icon rounded m-1" loading="lazy" data-astro-cid-qwhla4fl> aeagle/react-spaces</a> </td> <td class="desc" data-astro-cid-iowmqt5b> A React component library for creating flexible and responsive layouts in web applications. </td> <td class="num" data-astro-cid-iowmqt5b>1,304</td> </tr><tr data-astro-cid-iowmqt5b> <td data-astro-cid-iowmqt5b> <a href="/awesome/ctrlplusb/react-sizeme" data-astro-cid-qwhla4fl> <img src="https://avatars.githubusercontent.com/u/12164768?v=4" class="icon rounded m-1" loading="lazy" data-astro-cid-qwhla4fl> ctrlplusb/react-sizeme</a> </td> <td class="desc" data-astro-cid-iowmqt5b> A library that allows React components to adapt their size and layout based on their rendered dimensions. </td> <td class="num" data-astro-cid-iowmqt5b>1,947</td> </tr> </tbody> </table> </div> </div> </div> </main> </div> <div class="container-fluid p-2"> <footer class="row py-5 my-5 border-top"> <div class="col-4 mb-3"> <h5>Links</h5> <ul class="nav flex-column"> <li class="nav-item mb-2"> <a href="/about" class="nav-link p-0 text-muted"> About </a> </li> <li class="nav-item mb-2"> <a href="https://news.facts.dev" class="nav-link p-0 text-muted">news.facts.dev - Personalized Hackernews</a> </li> </ul> </div> <div class="col mb-3"> <a href="/" class="d-flex link-dark text-decoration-none mb-1"> <img loading="lazy" src="/favicon.png" width="32" height="32" alt="Logo" class="me-1"> <div class="lead">Awesome Links for Awesome Devs</div> </a> <p class="text-muted mt-1">© 2024 awesome.facts.dev</p> </div> </footer> </div> </div> <script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><astro-island uid="ZcxnrH" component-url="/_astro/AddProject.3E84b8g9.js" component-export="default" renderer-url="/_astro/client-v5.B68pIK7B.js" props="{}" ssr="" client="only" opts="{"name":"AddProject","value":"svelte"}"></astro-island> </body></html>