Localization in React Inplace editor component

8 Aug 202324 minutes to read

Localization

Localization library allows you to localize the default text content of the In-place Editor for different cultures using the locale property. In In-place Editor following keys will be localize based on culture.

Locale key	en-US (default)
save	Close
cancel	Cancel
loadingText	Loading…
editIcon	Click to edit
editAreaClick	Click to edit
editAreaDoubleClick	Double click to edit

To load translation object in an application use load function of L10n class. In the following sample, French culture is set to In-place Editor and change the tooltip text.

[Class-component]

app.jsx
app.tsx
import { L10n } from '@syncfusion/ej2-base';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
class App extends React.Component {
    inplaceEditorObj;
    dropdownObj;
    editableOnData = ['Click', 'DblClick', 'EditIconClick'];
    model = { placeholder: 'Enter some text' };
    onChange(e) {
        const editType = e.itemData.value;
        this.inplaceEditorObj.editableOn = editType;
        this.inplaceEditorObj.dataBind();
    }
    // set locale culture to In-place Editor
    componentWillMount() {
        L10n.load({
            'fr-BE': {
                'inplace-editor': {
                    'save': 'enregistrer',
                    'cancel': 'Annuler',
                    'loadingText': 'Chargement...',
                    'editIcon': 'Cliquez pour éditer',
                    'editAreaClick': 'Cliquez pour éditer',
                    'editAreaDoubleClick': 'Double-cliquez pour éditer'
                }
            }
        });
    }
    render() {
        return (<div id='container'>
            <table className="table-section">
              <tbody>
                <tr>
                    <td> EditableOn: </td>
                    <td>
                        <DropDownListComponent id='dropDown' dataSource={this.editableOnData} width='auto' value='Click' change={this.onChange = this.onChange.bind(this)} placeholder='Select edit type'/>
                    </td>
                </tr>
                <tr>
                    <td className="sample-td"> Enter your name: </td>
                    <td className="sample-td">
                        <InPlaceEditorComponent ref={(text) => { this.inplaceEditorObj = text; }} id='element' mode='Inline' value='Andrew' locale='fr-BE' model={this.model}/>
                    </td>
                </tr>
              </tbody>
            </table>
        </div>);
    }
}
export default App;
import { L10n } from '@syncfusion/ej2-base';
import { ChangeEventArgs, DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { EditableType, InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

class App extends React.Component<{},{}> {
  public inplaceEditorObj: InPlaceEditorComponent;
  public dropdownObj: DropDownListComponent;

  public editableOnData = ['Click', 'DblClick', 'EditIconClick'];
  public model = { placeholder: 'Enter some text' };

  public onChange(e: ChangeEventArgs): void {
    const editType: EditableType = e.itemData.value as EditableType;
    this.inplaceEditorObj.editableOn = editType;
    this.inplaceEditorObj.dataBind();
  }

  // set locale culture to In-place Editor
    public componentWillMount() {
        L10n.load({
            'fr-BE': {
                'inplace-editor': {
                  'save': 'enregistrer',
                  'cancel': 'Annuler',
                  'loadingText': 'Chargement...',
                  'editIcon': 'Cliquez pour éditer',
                  'editAreaClick': 'Cliquez pour éditer',
                  'editAreaDoubleClick': 'Double-cliquez pour éditer'
                }
            }
        });
    }

  public render() {
    return (
        <div id='container'>
            <table className="table-section">
              <tbody>
                <tr>
                    <td> EditableOn: </td>
                    <td>
                        <DropDownListComponent id='dropDown' dataSource= {this.editableOnData} width='auto' value='Click' change={ this.onChange=this.onChange.bind(this) } placeholder='Select edit type' />
                    </td>
                </tr>
                <tr>
                    <td  className="sample-td"> Enter your name: </td>
                    <td  className="sample-td">
                        <InPlaceEditorComponent ref={(text) => { this.inplaceEditorObj = text! }} id='element' mode='Inline' value='Andrew' locale='fr-BE' model={this.model} />
                    </td>
                </tr>
              </tbody>
            </table>
        </div>
    );
  }
}

export default App;

[Functional-component]

app.jsx
app.tsx
import { L10n } from '@syncfusion/ej2-base';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
function App() {
    React.useEffect(() => {
        // set locale culture to In-place Editor
        L10n.load({
            'fr-BE': {
                'inplace-editor': {
                    'save': 'enregistrer',
                    'cancel': 'Annuler',
                    'loadingText': 'Chargement...',
                    'editIcon': 'Cliquez pour éditer',
                    'editAreaClick': 'Cliquez pour éditer',
                    'editAreaDoubleClick': 'Double-cliquez pour éditer'
                }
            }
        });
    });
    let inplaceEditorObj;
    let dropdownObj;
    let editableOnData = ['Click', 'DblClick', 'EditIconClick'];
    let model = { placeholder: 'Enter some text' };
    function onChange(e) {
        const editType = e.itemData.value;
        inplaceEditorObj.editableOn = editType;
        inplaceEditorObj.dataBind();
    }
    return (<div id='container'>
            <table className="table-section">
              <tbody>
                <tr>
                    <td> EditableOn: </td>
                    <td>
                        <DropDownListComponent id='dropDown' dataSource={editableOnData} width='auto' value='Click' change={onChange = onChange.bind(this)} placeholder='Select edit type'/>
                    </td>
                </tr>
                <tr>
                    <td className="sample-td"> Enter your name: </td>
                    <td className="sample-td">
                        <InPlaceEditorComponent ref={(text) => { inplaceEditorObj = text; }} id='element' mode='Inline' value='Andrew' locale='fr-BE' model={model}/>
                    </td>
                </tr>
              </tbody>
            </table>
        </div>);
}
export default App;
import { L10n } from '@syncfusion/ej2-base';
import { ChangeEventArgs, DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { EditableType, InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

function App() {
  React.useEffect(() => {
    // set locale culture to In-place Editor
      L10n.load({
            'fr-BE': {
                'inplace-editor': {
                  'save': 'enregistrer',
                  'cancel': 'Annuler',
                  'loadingText': 'Chargement...',
                  'editIcon': 'Cliquez pour éditer',
                  'editAreaClick': 'Cliquez pour éditer',
                  'editAreaDoubleClick': 'Double-cliquez pour éditer'
                }
            }
        });
    });
  let inplaceEditorObj: InPlaceEditorComponent;
  let editableOnData = ['Click', 'DblClick', 'EditIconClick'];
  let model = { placeholder: 'Enter some text' };

  function onChange(e: ChangeEventArgs): void {
    const editType: EditableType = e.itemData.value as EditableType;
    inplaceEditorObj.editableOn = editType;
    inplaceEditorObj.dataBind();
  }

    return (
        <div id='container'>
            <table className="table-section">
              <tbody>
                <tr>
                    <td> EditableOn: </td>
                    <td>
                        <DropDownListComponent id='dropDown' dataSource= {editableOnData} width='auto' value='Click' change={onChange.bind(this) } placeholder='Select edit type' />
                    </td>
                </tr>
                <tr>
                    <td  className="sample-td"> Enter your name: </td>
                    <td  className="sample-td">
                        <InPlaceEditorComponent ref={(text) => { inplaceEditorObj = text! }} id='element' mode='Inline' value='Andrew' locale='fr-BE' model={model} />
                    </td>
                </tr>
              </tbody>
            </table>
        </div>
    );

}

export default App;

Right to left

Specifies the direction of the In-place Editor component using the enableRtl property. For writing systems that require it like Arabic, Hebrew, etc., the direction can be switched to right-to-left.

It will not change based on the locale property.

[Class-component]

app.jsx
app.tsx
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
class App extends React.Component {
    render() {
        return (<div id='container'>
            <span className="content-title"> Enter your name: </span>
            <InPlaceEditorComponent id='rtlelement' mode='Inline' value='Andrew' enableRtl={true}/>
        </div>);
    }
}
export default App;
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

class App extends React.Component<{},{}> {
  public render() {
    return (
        <div id='container'>
            <span className="content-title"> Enter your name: </span>
            <InPlaceEditorComponent id='rtlelement' mode='Inline' value='Andrew' enableRtl={true} />
        </div>
    );
  }
}

export default App;

[Functional-component]

app.jsx
app.tsx
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
function App() {
    return (<div id='container'>
            <span className="content-title"> Enter your name: </span>
            <InPlaceEditorComponent id='rtlelement' mode='Inline' value='Andrew' enableRtl={true}/>
        </div>);
}
export default App;
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

function App () {

    return (
        <div id='container'>
            <span className="content-title"> Enter your name: </span>
            <InPlaceEditorComponent id='rtlelement' mode='Inline' value='Andrew' enableRtl={true} />
        </div>
    );
}

export default App;

Format

Formatting is a way of representing the value in different format. You can format the following mentioned controls with its format property, when it passed through the In-place Editor model property.

[Class-component]

app.jsx
app.tsx
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
class App extends React.Component {
    value = new Date('11/23/2018');
    model = { placeholder: 'Select date', format: 'yyyy-MM-dd' };
    render() {
        return (<div id='container'>
            <span className="content-title"> Select date: </span>
            <InPlaceEditorComponent id='element' type='Date' value={this.value} model={this.model}/>
        </div>);
    }
}
export default App;
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

class App extends React.Component<{},{}> {
  public value = new Date('11/23/2018');
  public model = { placeholder: 'Select date', format: 'yyyy-MM-dd' };
  public render() {
    return (
        <div id='container'>
            <span className="content-title"> Select date: </span>
            <InPlaceEditorComponent id='element' type='Date' value={this.value} model={this.model} />
        </div>
    );
  }
}

export default App;

[Functional-component]

app.jsx
app.tsx
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
function App() {
    const value = new Date('11/23/2018');
    const model = { placeholder: 'Select date', format: 'yyyy-MM-dd' };
    return (<div id='container'>
            <span className="content-title"> Select date: </span>
            <InPlaceEditorComponent id='element' type='Date' value={value} model={model}/>
        </div>);
}
export default App;
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

function App () {
  const value : Date = new Date('11/23/2018');
  const model : object = { placeholder: 'Select date', format: 'yyyy-MM-dd' };

    return (
        <div id='container'>
            <span className="content-title"> Select date: </span>
            <InPlaceEditorComponent id='element' type='Date' value={value} model={model} />
        </div>
    );
  
}

export default App;