Events in React Chat UI component

28 Aug 20255 minutes to read

This section describes the events that the Chat UI component triggers when specific actions are performed. The following events are available:

created

The Chat UI component triggers the created event after the component has been rendered. This event is useful for performing actions once the Chat UI is fully initialized and ready for interaction.

index.jsx

import { ChatUIComponent } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    
    const created = () => {
        // Your required action here
    }

    return (
        // specifies the tag for render the Chat UI component
        <ChatUIComponent created={created}></ChatUIComponent>
    );
}

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

index.tsx

import { ChatUIComponent } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    
    const created = () => {
        // Your required action here
    }

    return (
        // specifies the tag for render the Chat UI component
        <ChatUIComponent created={created} ></ChatUIComponent>
    );
}

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

messageSend

The messageSend event is triggered before a message is sent from the Chat UI component.

index.jsx

import { ChatUIComponent } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    
    const messageSend = () => {
        // Your required action here
    }
    return (
        // specifies the tag for render the Chat UI component
        <ChatUIComponent messageSend={messageSend}></ChatUIComponent>
    );
}

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

index.tsx

import { ChatUIComponent } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {

    const messageSend = () => {
        // Your required action here
    }
    return (
        // specifies the tag for render the Chat UI component
        <ChatUIComponent messageSend={messageSend}></ChatUIComponent>
    );
}

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

userTyping

The userTyping event is triggered as a user types a message in the Chat UI input field. This is useful for implementing features like typing indicators (“User is typing…”).

index.jsx

import { ChatUIComponent } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const userTyping = () => {
        // Your required action here
    }
    return (
        // specifies the tag for render the Chat UI component
        <ChatUIComponent userTyping={userTyping} ></ChatUIComponent>
    );
}

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

index.tsx

import { ChatUIComponent } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const userTyping = () => {
        // Your required action here
    }

    return (
        // specifies the tag for render the Chat UI component
        <ChatUIComponent userTyping={userTyping} ></ChatUIComponent>
    );
}

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