Localization in React Dialog component

15 Mar 20236 minutes 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.

[Class-component]

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

app.tsx

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]

app.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"
        }
    }
});
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;

app.tsx

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;