While we are using SUSI Web Chat Application we may have to send lengthy messages. Existing application’s Message composer supports for lengthy messages but it manages a constant value for every user input. While we were developing the application we got a requirement to build a growing message composer.
Final output of this implementation produces a message composer that grows when user completes a new line until user completes 5 lines and after 5 lines it maintains a fixed size and enables scrolling.
So we tried several packages to get this done. And finally we did this using react-textarea-autosize it gives all these features and it gives user to customize the elements furthermore.
First we have to install the npm package:
npm install --save react-textarea-autosize
After the installation we have to import the package on top of the “MessageComposer.react.js”
import TextareaAutosize from 'react-textarea-autosize';
Next we need to use this package like this,
<TextareaAutosize className='scroll' id='scroll' minRows={1} maxRows={5} placeholder="Type a message..." value={this.state.text} onChange={this._onChange.bind(this)} onKeyDown={this._onKeyDown.bind(this)} ref={(textarea) => { this.nameInput = textarea; }} style={{ background: this.props.textarea}} />
This package provides “minRows” and “maxRows” attributes and we can define minimum height of the text area and maximum height it can grow. If you need to know more about auto growing text areas and to get examples refer this.
Next we wanted to hide the scrollbar which is displaying when the textarea height is exceeding.
How we hide the scrollbars on chrome browsers.
.scroll::-webkit-scrollbar { display: none; }
This is how we hide the scrollbar on firefox browser.
.scroll { overflow: -moz-scrollbars-none; }
Now we have to style up the textarea because it comes with default styles. We wrapped up the textarea with the div and applied our styles to that. In my case we wrapped up my textarea with “<div className=“textBack”>”
This is how we styled the textarea using the wrapper div.
.textBack{ background: #fff; width: 83%; border-radius: 40px; padding: 5px 20px; display: block; position: relative; top: 12%; box-sizing: content-box; margin: 0px 0 10px 0; }
Our textarea is like this.
It expands when user exceeds the width of textarea.
This is how we implemented the SUSI Web Chat’s growing message composer. If you would like to contribute please fork our repository on github
Resources:
- NPM package and documentation: https://www.npmjs.com/package/react-textarea-autosize
- Examples of auto growing textareas: https://andreypopp.github.io/react-textarea-autosize/