Allow custom components to be used instead of standard <textarea/>

[sdistefano]

This change allows other components to be used, apart from a normal by means of the new textAreaComponent prop. This allows for other components such as react-textarea-autosize to be easily used in combination</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jukben"><img src="https://avatars.githubusercontent.com/u/8135252?v=4" />jukben</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>(bot)</p> <p>Hey! Thank you so much for your PR! I can see that everything is green 👏.</p> <p><a href="https://533-94480675-gh.circle-artifacts.com/0/example/index.html">Here is the playground for this revision</a> 🚀</p> <p>I hope everything is fine! ❤️</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jukben"><img src="https://avatars.githubusercontent.com/u/8135252?v=4" />jukben</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>Hey! Thanks for this! It makes sense - although it's still kinda bound to "textarea" because it expects that props like <code>onChang</code>, <code>onScroll</code>, will be there. Also, the <code>ref</code> has to point to the actual textarea. Otherwise, it won't work correctly. Did you test it? </p> <p>As I can see we'd have to use <code>innerRef</code> <a href="https://github.com/buildo/react-autosize-textarea#refs-to-dom-nodes">https://github.com/buildo/react-autosize-textarea#refs-to-dom-nodes</a>. What to do about this? Maybe the API could be <code>textAreaComponent={Comp}</code> for easy implementation with the new React.forwardRef and for other cases it can take also <code>{component: Comp, ref: "innerRef"}</code></p> <p>I guess it will be good to do some kind of check after the first render, that <code>this.textareaRef</code> is actually textarea ref. </p> <p>What do you think about it? Are you able to deliver it? 🙏 </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sdistefano"><img src="https://avatars.githubusercontent.com/u/600021?v=4" />sdistefano</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>Hi Jacub! I'm on holidays now for a week. In my own implementation I wrote a thin wrapper around the target component that uses forwardRef. I like the api ;let me get back to this in a few days.</p> <p>On Tuesday, January 1, 2019, Jakub Beneš <a href="mailto:notifications@github.com">notifications@github.com</a> wrote:</p> <blockquote> <p>Hey! Thanks for this! It makes sense - although it's still kinda bound to "textarea" because it expects that props like onChang, onScroll, will be there. Also, the ref has to point to the actual textarea. Otherwise, it won't work correctly. Did you test it?</p> <p>As I can see we'd have to use innerRef <a href="https://github.com/buildo/">https://github.com/buildo/</a> react-autosize-textarea#refs-to-dom-nodes. What to do about this? Maybe the API could be textAreaComponent={Comp} for easy implementation with the new React.forwardRef and for other cases it can take also {component: Comp, ref: "innerRef"}</p> <p>I guess it will be good to do some kind of check after the first render, that this.textareaRef is actually textarea ref.</p> <p>What do you think about it? Are you able to deliver it? 🙏</p> <p>— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <a href="https://github.com/webscopeio/react-textarea-autocomplete/pull/113#issuecomment-450752183">https://github.com/webscopeio/react-textarea-autocomplete/pull/113#issuecomment-450752183</a>, or mute the thread <a href="https://github.com/notifications/unsubscribe-auth/AAkn1WRA0vCSJcSVpIK54agJf7nX67E2ks5u-7kxgaJpZM4Zl7pD">https://github.com/notifications/unsubscribe-auth/AAkn1WRA0vCSJcSVpIK54agJf7nX67E2ks5u-7kxgaJpZM4Zl7pD</a> .</p> </blockquote> <p>-- Silvio Di Stefano</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jukben"><img src="https://avatars.githubusercontent.com/u/8135252?v=4" />jukben</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>Awesome. Good to hear that. Now, enjoy your vacation and let's discuss this once you will be back. 💪 </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sdistefano"><img src="https://avatars.githubusercontent.com/u/600021?v=4" />sdistefano</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>Hi! Updated as discussed</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jukben"><img src="https://avatars.githubusercontent.com/u/8135252?v=4" />jukben</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>Thanks for your contribution! Deployed as 4.2.0 🚀 </p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>