Getting Started with React TextArea Component

11 Oct 20248 minutes to read

This section briefly explains how to create a simple TextArea and demonstrate the basic functionalities of the TextArea component in an React environment.

To get start quickly with React TextArea, you can check on this video:

Dependencies

The following list of dependencies are required to use the TextArea component in your application.

|-- @syncfusion/ej2-react-inputs
    |-- @syncfusion/ej2-react-base
    |-- @syncfusion/ej2-inputs
    |-- @syncfusion/ej2-base

Installation and configuration

You can use create-react-app to setup the applications.
To install create-react-app run the following command.
```
   npm install -g create-react-app
```

Start a new project using create-react-app command as follows.

     create-react-app quickstart --scripts-version=react-scripts-ts
     cd quickstart

To install TextArea component, use the following command.
```
    npm install @syncfusion/ej2-react-inputs –save
```
The above package installs Input dependencies which are required to render the TextArea component in React environment.
The TextArea CSS files are available in the ej2-react-inputs package folder. This can be referenced in your application using the following code.

[src/App.css]

@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-inputs/styles/material.css";

The Custom Resource Generator (CRG) is an online web tool, which can be used to generate the custom script and styles for a set of specific components.
This web tool is useful to combine the required component scripts and styles in a single file.

Adding TextArea to the application

To include the TextArea component in your application import the TextAreaComponent from ej2-react-inputs package in App.tsx.

Add the TextArea component in application as shown in below code example.

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

{ /* To render TextArea. */ }
function App() {
    return (
        <TextAreaComponent id='default'></TextAreaComponent>
    );
}
export default App;

Running the application

Run the application in the browser using the following command:

   npm start

The following example shows a basic TextArea component.

index.jsx
index.tsx
// 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'></TextAreaComponent>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('input-container'));
// 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'></TextAreaComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('input-container'));

Getting and setting values

To set the initial value of the TextArea component, you can utilize the value property. Here’s how you can achieve it:

{/* 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' value='Comments'></TextAreaComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('input-container'));

Alternatively, you can set the value of the TextArea using a state variable.

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

{/* To render TextArea.*/}
function App() {
    // Declare state variable textValue and a function setTextValue to update it.
    const [textValue, setTextValue] = useState("comments");
    return (
        <div className='wrap'>
            {/* Render TextArea with value property set to textValue state variable. */}
            <TextAreaComponent id='default' value={textValue}></TextAreaComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('input-container'));

You can dynamically retrieve the value of the TextArea component using the state variable assigned to the value property of the TextArea component.

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

{/* To render TextArea.*/}
function App() {
    const [textValue, setTextValue] = useState("comments");
    function onButtonClick () {
        // Get the value of the TextArea using state variable.
        let value = textValue; 
    }
    return (
        <div className='wrap'>
            <TextAreaComponent id='rating' value={textValue}></TextAreaComponent>
            <button id="valuebtn" onclick={onButtonClick.bind(this)}>Get Value</button>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('input-container'));

You can retrieve the value of the TextArea by accessing it as an argument from the change event.

{/* 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() {
    // triggers when the content of TextArea has changed and gets focus-out.
    function change(args) {
        // Get the value of the TextArea from event arguments.
        let value = args.value;
    }
    return (
        <div className='wrap'>
            <TextAreaComponent id='default' value='Comments' change={change}></TextAreaComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('input-container'));