One alternative approach is to use div[contenteditable=true] in place of textarea. This is because textarea requires manual adjustment of the height with every input, which can negatively impact performance.
By utilizing contenteditable on a div, you can leverage the default behavior of automatically adjusting the element's height to fit its content.
It's important to note that contenteditable may not work as expected on older browsers such as IE10 and earlier versions.
Take a look at the code snippet below for a demonstration.
div[contenteditable="true"] {
border: 1px solid grey;
padding: 5px 10px;
}
<div contenteditable="true">
test
</div>
UPDATE
Creating a text area component using contenteditable
<TextArea
value={myText}
style={{ 'border': '1px solid grey' }}
onChange={e => console.log(e.target.value)} />
Implementation
class TextArea extends React.Component {
onChange() {
var text = ReactDOM.findDOMNode(this).innerText;
this.props.onChange && this.props.onChange({
target: {
value: text
}
});
}
render() {
const {props} = this;
return (
<div
contentEditable={true}
dangerouslySetInnerHTML={{ __html: props.value.replace(/\r?\n/g, '<br>') }}
onInput={this.onChange.bind(this)}
onBlur={this.onChange.bind(this)}
{...props}
/>
)
}
}