React TextArea - Getting Started

jQuery
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
Angular
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
Vue
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
React
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.

The TextArea component allows users to enter and edit multi-line text.

This tutorial shows how to add a TextArea component to a page and configure the component's core settings. As a result, you will create the following UI component:

Each section in this tutorial describes a single configuration step. You can find the full code in the following GitHub repository: getting-started-with-text-area.

Create a TextArea

jQuery

Add DevExtreme to your jQuery application and use the following code to create a TextArea component:

index.js
index.html
$(function() {
    $("#text-area").dxTextArea({ });
});
<html>
    <head>
        <!-- ... -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/24.1.7/css/dx.light.css">
        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/24.1.7/js/dx.all.js"></script>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body>
        <div id="text-area"></div>
    </body>
</html>
Angular

Add DevExtreme to your Angular application and use the following code to create a TextArea component:

app.component.html
app.component.ts
app.module.ts
<dx-text-area></dx-text-area>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {

}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxTextAreaModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxTextAreaModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue

Add DevExtreme to your Vue application and use the following code to create a TextArea component:

App.vue
<template>
    <DxTextArea>
    </DxTextArea>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import { DxTextArea } from 'devextreme-vue/text-area';

export default {
    components: {
        DxTextArea
    }
}
</script>
React

Add DevExtreme to your React application and use the following code to create a TextArea component:

App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { TextArea } from 'devextreme-react/text-area';

function App() {
    return (
        <TextArea>
        </TextArea>
    );
}

export default App;

Specify Value and Label

To set an initial TextArea value, use the value property. You can also specify the maxLength property to limit the number of characters users can enter. Note that this property only limits the number of characters for users. Your code can specify text that exceeds the maximum character length, but the number of characters displayed to users will still be limited by this property setting.

Use the placeholder property to give users a hint about what they should type in the TextArea. You can also use the label property for this purpose. To change the label appearance, set the labelMode property to one of the following values:

  • "static"
    The component displays the label above the input field.

  • "floating"
    The component uses the label as a placeholder, but when the editor gets focus, the label moves to the position above the input field.

  • "hidden"
    The label is hidden.

jQuery
index.js
$(function() {
    $("#text-area").dxTextArea({ 
        value: longText,
        maxLength: 500,
        label: "Country"
    });
});

const longText = "Japan is a sovereign island nation in East Asia. Located in the Pacific Ocean, it lies off the eastern coast of the Asian mainland and stretches from the Sea of Okhotsk in the north to the East China Sea and China in the southwest. The Greater Tokyo Area is the most populous metropolitan area in the world.";
Angular
app.component.html
app.component.ts
<dx-text-area
    [value]="longText"
    [maxLength]="500"
    label="Country"
>
</dx-text-area>
// ...
export class AppComponent {
    longText = "Japan is a sovereign island nation in East Asia. Located in the Pacific Ocean, it lies off the eastern coast of the Asian mainland and stretches from the Sea of Okhotsk in the north to the East China Sea and China in the southwest. The Greater Tokyo Area is the most populous metropolitan area in the world.";
}
Vue
App.vue
<template>
    <DxTextArea
        :value="longText"
        :max-length="500"
        label="Country"
    />
</template>

<script>
    // ...
    export default {
        components: {
            DxTextArea
        },
        data() {
            return {
                longText: "Japan is a sovereign island nation in East Asia. Located in the Pacific Ocean, it lies off the eastern coast of the Asian mainland and stretches from the Sea of Okhotsk in the north to the East China Sea and China in the southwest. The Greater Tokyo Area is the most populous metropolitan area in the world."
            };
        }
    }
</script>
React
App.js
// ...
const longText = "Japan is a sovereign island nation in East Asia. Located in the Pacific Ocean, it lies off the eastern coast of the Asian mainland and stretches from the Sea of Okhotsk in the north to the East China Sea and China in the southwest. The Greater Tokyo Area is the most populous metropolitan area in the world.";

function App() {
    return (
        <TextArea 
            value={longText}
            maxLength={500}
            label="Country"
        />
    );
}

export default App;

Resize TextArea

If the size of the UI component should be fixed, specify the width and height properties.

The UI component's height can also adapt to UI component contents. In this case, set the autoResizeEnabled property to true. To specify the minimum and maximum height for the adaptive TextArea, use the minHeight and maxHeight properties.

jQuery
index.js
$(function() {
    $("#text-area").dxTextArea({ 
        // ...
        minHeight: 50,
        maxHeight: 300,
        autoResizeEnabled: true
    });
});
Angular
app.component.html
<dx-text-area ...
    [minHeight]="50"
    [maxHeight]="300"
    [autoResizeEnabled]="true"
>
</dx-text-area>
Vue
App.vue
<template>
    <DxTextArea ...
        :min-height="50"
        :max-height="300"
        :auto-resize-enabled="true"
    />
</template>

<script>
    // ...
</script>
React
App.js
// ...
function App() {
    return (
        <TextArea ...
            minHeight={50}
            maxHeight={300}
            autoResizeEnabled={true}
        />
    );
}

export default App;

Handle Value Change

If a user edits the text in a TextArea, the UI component updates the value property. The update happens on the change event. To specify another value change event, use the valueChangeEvent property.

To handle the value change event, implement the onValueChanged function.

jQuery
index.js
$(function() {
    $("#text-area").dxTextArea({ 
        // ...
        valueChangeEvent: "keyup",
        onValueChanged() {
            DevExpress.ui.notify("The value has been changed");
        }
    });
});
Angular
app.component.html
app.component.ts
<dx-text-area ...
    valueChangeEvent="keyup"
    (onValueChanged)="onValueChanged()"
>
</dx-text-area>
import { Component } from '@angular/core';
import notify from 'devextreme/ui/notify';

// ...

export class AppComponent {
    onValueChanged() {
        notify("The value has been changed");
    }
}
Vue
App.vue
<template>
    <DxTextArea ...
        value-change-event="keyup"
        @value-changed="onValueChanged"
    />
</template>

<script>
    // ...
    import notify from "devextreme/ui/notify";

    export default {
        components: {
            DxTextArea
        },
        data() {
            // ...
        },
        methods: {
            onValueChanged() {
                notify("The value has been changed");
            }
        }
    }
</script>
React
App.js
import React, { useCallback } from "react";
import "devextreme/dist/css/dx.light.css";
import { TextArea } from 'devextreme-react/text-area';
import notify from "devextreme/ui/notify";

// ...

function App() {
    const onValueChanged = useCallback(() => {
        notify("The value has been changed");
    }, []);
    return (
        <TextArea ...
            valueChangeEvent="keyup"
            onValueChanged={onValueChanged}
        />
    );
}

export default App;