Localization in React Mention component

2 Feb 202311 minutes to read

The Localization library allows you to localize static text content of the noRecordsTemplate  properties according to the culture currently assigned to the Mention.

Locale key en-US (default)
noRecordsTemplate No records found

Loading translations

To load the translation object to your application, use the load function of the L10n class.

In the following sample, French culture is set to the mention component and no data is loaded. Hence, the noRecordsTemplate property displays its text in French culture initially.

[Class-component]

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { L10n } from '@syncfusion/ej2-base';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
export default class App extends React.Component {
    mentionTarget = '#mentionElement';
    customerData = new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
        adaptor: new ODataV4Adaptor,
        crossDomain: true
    });
    fields = { text: 'ContactName', value: 'CustomerID' };
    query = new Query().select(['ContactName', 'CustomerID']).take(0);
    componentWillMount() {
        L10n.load({
            'fr-BE': {
                'dropdowns': {
                    'noRecordsTemplate': "Aucun enregistrement trouvé"
                }
            }
        });
    }
    render() {
        return (<div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user'></div>
            </td>
          </tr>
        </table>
        <MentionComponent target={this.mentionTarget} dataSource={this.customerData} locale="fr-BE" fields={this.fields} query={this.query}></MentionComponent>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { L10n, setCulture} from '@syncfusion/ej2-base';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';

export default class App extends React.Component<{}, {}> {
  private mentionTarget: string = '#mentionElement';
  private customerData: DataManager = new DataManager({
    url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
    adaptor: new ODataV4Adaptor,
    crossDomain: true
    });
  private fields: Object =  { text: 'ContactName', value: 'CustomerID' };
  private query: Query = new Query().select(['ContactName', 'CustomerID']).take(0);
  public componentWillMount() {
    L10n.load({
      'fr-BE': {
        'dropdowns': {
          'noRecordsTemplate': "Aucun enregistrement trouvé"
        }
      }
    });
  }

  public render() {
    return (
      <div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user' ></div>
            </td>
          </tr>
        </table>
        <MentionComponent target={this.mentionTarget} dataSource={this.customerData} locale="fr-BE" fields={this.fields} query={this.query} ></MentionComponent>
      </div>
    );
  }
}

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

[Functional-component]

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { L10n } from '@syncfusion/ej2-base';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
function App() {
    let mentionTarget = '#mentionElement';
    let customerData = new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
        adaptor: new ODataV4Adaptor,
        crossDomain: true
    });
    let fields = { text: 'ContactName', value: 'CustomerID' };
    let query = new Query().select(['ContactName', 'CustomerID']).take(0);
    function componentWillMount() {
        L10n.load({
            'fr-BE': {
                'dropdowns': {
                    'noRecordsTemplate': "Aucun enregistrement trouvé"
                }
            }
        });
    }
    return (<div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user'></div>
            </td>
          </tr>
        </table>
        <MentionComponent target={mentionTarget} dataSource={customerData} locale="fr-BE" fields={fields} query={query}></MentionComponent>
      </div>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { L10n, setCulture} from '@syncfusion/ej2-base';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';

function App () {
  let mentionTarget: string = '#mentionElement';
  let customerData: DataManager = new DataManager({
    url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
    adaptor: new ODataV4Adaptor,
    crossDomain: true
    });
  let fields: Object =  { text: 'ContactName', value: 'CustomerID' };
  let query: Query = new Query().select(['ContactName', 'CustomerID']).take(0);
  function componentWillMount() {
    L10n.load({
      'fr-BE': {
        'dropdowns': {
          'noRecordsTemplate': "Aucun enregistrement trouvé"
        }
      }
    });
  }

  return (
      <div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user' ></div>
            </td>
          </tr>
        </table>
        <MentionComponent target={mentionTarget} dataSource={customerData} locale="fr-BE" fields={fields} query={query} ></MentionComponent>
      </div>
  );
}

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

See Also