Localization in React Dialog

4 Sep 20267 minutes to read

The Localization library enables localization of the React Dialog’s default text content. In the React Dialog, only the close button’s tooltip text is localized according to the selected culture. The close button tooltip is the only localizable text in the React Dialog.

Loading translations

To load a translation object in the application, use the load function of the L10n class. Follow these steps to localize the React Dialog:

  1. Import the L10n class from @syncfusion/ej2-base.
  2. Call L10n.load() with a translation object mapping the locale code (for example, fr-BE) to the React Dialog’s close key.
  3. Set the locale property on the DialogComponent to the desired culture code (for example, locale='fr-BE').

Locale codes follow the language-COUNTRY format (for example, fr-FR, fr-BE, de-DE). For the full list of supported culture codes, see the available culture/locale list.

The following table lists the localizable key and its default text.

Key Default text (en-US)
close Close

In the following sample, the French (Belgium) culture (fr-BE) is set to the React Dialog, and the close button’s tooltip text is changed accordingly.

[Class-component]

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 {
    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 { 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;

[Functional-component]

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"
        }
    }
});
function App() {
    function content() {
        return (<div>
          Dialogue avec la culture française
        </div>);
    }
    return (<div className="App" id='dialog-target'>
          <DialogComponent width='250px' locale='fr-BE' content={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"
       }
   }
});

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

See Also