Globalization in React Chat UI component

28 Aug 202510 minutes to read

The Syncfusion Chat UI component is designed with globalization in mind, allowing it to serve users in various regions and languages.

Localization

The Chat UI component can be localized for any culture. The default language is English (en). To adapt the component to another language, you can provide translations for the keys in its default culture file. The placeholders {0} and {1} represent user names, while {2} is used for a numeric count of additional users.

Key Default Text Example Usage
oneUserTyping {0} is typing Suresh is typing
twoUserTyping {0} and {1} are typing Suresh and Gopi are typing
threeUserTyping {0}, {1}, and {2} other are typing Suresh, Gopi, and 1 other are typing
multipleUsersTyping {0}, {1}, and {2} others are typing Suresh, Gopi, and 5 others are typing

The following example demonstrates how to load the German (de) culture and apply it to the Chat UI.

import { ChatUIComponent, MessagesDirective, MessageDirective } from '@syncfusion/ej2-react-interactive-chat';
import { L10n } from '@syncfusion/ej2-base';

import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const currentUserModel = {
        id: "user1",
        user: "Albert"
    };

    const michaleUserModel = {
        id: "user2",
        user: "Michale Suyama"
    };

    const typingUsers = [ michaleUserModel ];

    L10n.load({
        'de': {
            "chat-ui": {
                "oneUserTyping": "{0} tippt",
                "twoUserTyping": "{0} und {1} tippen",
                "threeUserTyping": "{0}, {1} und {2} andere tippen gerade",
                "multipleUsersTyping": "{0}, {1} und {2} andere tippen gerade"
            }
        }
    });
    return (
        // specifies the tag for render the Chat UI component
        <ChatUIComponent user={currentUserModel} typingUsers={typingUsers} locale="de">
            <MessagesDirective>
                <MessageDirective text="Hi Michale, are we on track for the deadline?" author={currentUserModel} ></MessageDirective>
                <MessageDirective text="Yes, the design phase is complete." author={michaleUserModel} ></MessageDirective>
                <MessageDirective text="I’ll review it and send feedback by today." author={currentUserModel} ></MessageDirective>
            </MessagesDirective>
        </ChatUIComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));
import { ChatUIComponent, MessagesDirective, MessageDirective, UserModel } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const currentUserModel: UserModel = {
        id: "user1",
        user: "Albert"
    };

    const michaleUserModel: UserModel = {
        id: "user2",
        user: "Michale Suyama"
    };

    const typingUsers: UserModel[] = [ michaleUserModel ];

    return (
        // specifies the tag for render the Chat UI component
        <ChatUIComponent user={currentUserModel} typingUsers={typingUsers} locale="de">
            <MessagesDirective>
                <MessageDirective text="Hi Michale, are we on track for the deadline?" author={currentUserModel} ></MessageDirective>
                <MessageDirective text="Yes, the design phase is complete." author={michaleUserModel} ></MessageDirective>
                <MessageDirective text="I’ll review it and send feedback by today." author={currentUserModel} ></MessageDirective>
            </MessagesDirective>
        </ChatUIComponent>
    );
}

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

RTL

Right-to-Left (RTL) support provides an option to render the Chat UI component with a right-to-left layout and text direction. This is essential for users of languages such as Arabic, Hebrew, and Persian. You can enable this feature by setting the enableRtl property to true.

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

function App() {
    const currentUserModel = {
        id: "user1",
        user: "Albert"
    };

    const michaleUserModel = {
        id: "user2",
        user: "Michale Suyama"
    };


    return (
        // specifies the tag for render the Chat UI component
        <ChatUIComponent user={currentUserModel} enableRtl={true}>
            <MessagesDirective>
                <MessageDirective text="Hi Michale, are we on track for the deadline?" author={currentUserModel} ></MessageDirective>
                <MessageDirective text="Yes, the design phase is complete." author={michaleUserModel} ></MessageDirective>
                <MessageDirective text="I’ll review it and send feedback by today." author={currentUserModel} ></MessageDirective>
            </MessagesDirective>
        </ChatUIComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));
import { ChatUIComponent, MessagesDirective, MessageDirective, UserModel } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const currentUserModel: UserModel = {
        id: "user1",
        user: "Albert"
    };

    const michaleUserModel: UserModel = {
        id: "user2",
        user: "Michale Suyama"
    };

    return (
        // specifies the tag for render the Chat UI component
        <ChatUIComponent user={currentUserModel} enableRtl={true}>
            <MessagesDirective>
                <MessageDirective text="Hi Michale, are we on track for the deadline?" author={currentUserModel} ></MessageDirective>
                <MessageDirective text="Yes, the design phase is complete." author={michaleUserModel} ></MessageDirective>
                <MessageDirective text="I’ll review it and send feedback by today." author={currentUserModel} ></MessageDirective>
            </MessagesDirective>
        </ChatUIComponent>
    );
}

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