Resize in React TextArea Component

16 Oct 20247 minutes to read

The TextArea allows users to input and edit large amounts of text. Resizing this control effectively can enhance the user experience and accommodate varying content needs. This resizing behavior can be enabled and configured using the resizeMode API, which offers several options for resizing the TextArea:

Type Description
Vertical Allows users to adjust the height of the TextArea vertically. It is suitable when users want to resize the TextArea only along the vertical axis, accommodating varying amounts of text input.
Horizontal Users can adjust the width of the TextArea horizontally. This option is helpful for accommodating longer lines of text without altering the height of the control.
Both Allows users to adjust both the height and width of the TextArea, offering maximum flexibility in resizing. It is ideal for situations where users need precise control over the dimensions of the TextArea.
None Disables the resizing in the TextArea. This option is ideal for situations where maintaining a consistent layout is critical, and resizing by users is unnecessary.

In addition to the above options, the resizeMode property defaults to Both. In this case, the width of the TextArea will not be adjusted automatically. You can still update it manually through the cols property or with CSS.

// Import the TextArea.
import { TextAreaComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render TextArea.
function App() {
    return (
        <div className='wrap'>
            <TextAreaComponent id="default" placeholder="Enter your comments" resizeMode="Both"></TextAreaComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('input-container'));
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {
 public  textBoxObj: any;
  public render() {
    return (
        <div className="multiline">
        <TextBoxComponent multiline={true} value= 'Mr. Dodsworth Dodsworth, System Analyst, Studio 103, The Business Center' input={this.onInput = this.onInput.bind(this)} created={this.onCreate = this.onCreate.bind(this)} placeholder='Enter your address' floatLabelType='Auto' ref = {scope => {this.textBoxObj = scope }}/>
        </div>
    );
  }
    private onCreate(): void {
        this.textBoxObj.addAttributes({rows: 1});
        this.textBoxObj.respectiveElement.style.height = "auto";
        this.textBoxObj.respectiveElement.style.height = (this.textBoxObj.respectiveElement .scrollHeight)+"px";
    }
    private onInput(): void {
        this.textBoxObj.respectiveElement.style.height = "auto";
        this.textBoxObj.respectiveElement.style.height = (this.textBoxObj.respectiveElement .scrollHeight)+"px";
    }
}

ReactDOM.render(<App />, document.getElementById('default'));

Width of react TextArea component

You can easily customize the width of the TextArea using the width property. This property allows precise adjustment of the TextArea’s width according to the specific layout requirements of the application.

// Import the TextArea.
import { TextAreaComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render TextArea.
function App() {
    return (
        <div className='wrap'>
            <TextAreaComponent id="default" placeholder="Enter your comments" resizeMode="Both" width="500"></TextAreaComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('input-container'));
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
  let textBoxObj: any;
    return (
        <div className="multiline">
        <TextBoxComponent multiline={true} value= 'Mr. Dodsworth Dodsworth, System Analyst, Studio 103, The Business Center' input={onInput = onInput.bind(this)} created={onCreate = onCreate.bind(this)} placeholder='Enter your address' floatLabelType='Auto' ref = {scope => {textBoxObj = scope }}/>
        </div>
    );
    function onCreate(): void {
        textBoxObj.addAttributes({rows: 1});
        textBoxObj.respectiveElement.style.height = "auto";
        textBoxObj.respectiveElement.style.height = (textBoxObj.respectiveElement .scrollHeight)+"px";
    }
    function onInput(): void {
        textBoxObj.respectiveElement.style.height = "auto";
        textBoxObj.respectiveElement.style.height = (textBoxObj.respectiveElement .scrollHeight)+"px";
    }
}

ReactDOM.render(<App />, document.getElementById('default'));