Search results

Localization in React Dialog component

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.css.jsx
App.jsx
index.jsx
import { L10n } from '@syncfusion/ej2-base';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
import './App.css';

// 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";
import './App.css';
// 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'));