Resize in React TextArea Component

21 Feb 20267 minutes to read

The TextArea supports resizing to enhance user experience and accommodate varying content. Configure resizing behavior using the resizeMode API, which offers several options:

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.

index.jsx

// 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'));

index.tsx

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

Customize the TextArea width using the width property for precise adjustment according to your layout requirements.

index.jsx

// 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'));

index.tsx

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'));