Localization in React Dialog component

20 Apr 2021 / 1 minute to read

Localization library allows to localize the default text content of Dialog. In Dialog, The close button’s tooltip text alone will be localize based on culture.

Locale key	en-US (default)
close	Close

Loading translations

To load translation object in an application use load function of L10n class.

In the below sample, French culture is set to Dialog and change the close button’s tooltip text.

Source

Preview

App.tsx

App.jsx

index.jsx

import { L10n } from '@syncfusion/ej2-base';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";

// Load French culture for Dialog close button tooltip text
L10n.load({
  'fr-BE': {
     'dialog': {
           'close': "Fermer"
       }
   }
});

class App extends React.Component<{}, {}> {
  public content = (): JSX.Element => {
      return (
        <div>
        Dialogue avec la culture française
        </div>
      )
  }
  public render() {
    return (
      <div className="App" id='dialog-target'>
    <DialogComponent
    width='250px' locale= 'fr-BE' content={this.content} header='Dialog' closeOnEscape={false}
    showCloseIcon={true} target='#dialog-target'/>
      </div>
  );
  }
}
export default App;

import { L10n } from '@syncfusion/ej2-base';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
// Load French culture for Dialog close button tooltip text
L10n.load({
    'fr-BE': {
        'dialog': {
            'close': "Fermer"
        }
    }
});
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.content = () => {
            return (<div>
        Dialogue avec la culture française
        </div>);
        };
    }
    render() {
        return (<div className="App" id='dialog-target'>
    <DialogComponent width='250px' locale='fr-BE' content={this.content} header='Dialog' closeOnEscape={false} showCloseIcon={true} target='#dialog-target'/>
      </div>);
    }
}
export default App;

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('container'));