How to use the @bentley/imodeljs-frontend.IModelApp.i18n function in @bentley/imodeljs-frontend

public onLoad(_args: string[]): void {
    // don't register the namespace and the tool until the onLoad method. That's called after we know the versions of the modules required are good.
    this._measureNamespace = IModelApp.i18n.registerNamespace("MeasureTool");
    this._measureNamespace.readFinished.then(() => { MeasurePointsTool.register(this._measureNamespace); })
      .catch((err) => { console.log(err); });
  }

public render() {
    let error = null;
    if (this.state.error)
      error = (<div>{IModelApp.i18n.translate("Sample:controls.notifications.error")}: {this.state.error.message}</div>);

    return (
      <div>
        {IModelApp.i18n.translate("Sample:controls.notifications.select-imodel")}:
        <select>
          {this.state.availableImodels.map((path: string) =&gt; (
            <option value="{path}">{path.split(/[\\/]/).pop()}</option>
          ))}
        </select>
        {error}
      </div>
    );
  }
}

Input
            
            
              iModel Name
              {this.props.iModelConnection ? this.props.iModelConnection.name : ""}
            
            
              {IModelApp.i18n.translate("SampleApp:zone6.month")}
               <input type="month"> 
            
            
              {IModelApp.i18n.translate("SampleApp:zone6.number")}
               <input max="20" min="10" type="number"> 
            
            
              {IModelApp.i18n.translate("SampleApp:zone6.password")}
               <input type="password"> 
            
            
              {IModelApp.i18n.translate("SampleApp:zone6.radio")}
               <input type="radio"> 
            
            
              {IModelApp.i18n.translate("SampleApp:zone6.range")}
               <input type="range"> 
            
            
              {IModelApp.i18n.translate("SampleApp:zone6.search")}
               <input type="search"> 
            
            
              {IModelApp.i18n.translate("SampleApp:zone6.Tel")}

export interface ViewportDialogProps {
  opened: boolean;
  projectName: string;
  imodelName: string;
  dialogId: string;
}

export interface ViewportDialogState {
  opened: boolean;
  viewId?: Id64String;
  iModelConnection?: IModelConnection;
}

export class ViewportDialog extends React.Component {
  private _loading = IModelApp.i18n.translate("SampleApp:Test.loading");
  private _viewport: ScreenViewport | undefined;

  public readonly state: Readonly;

  constructor(props: ViewportDialogProps) {
    super(props);
    this.state = {
      opened: this.props.opened,
    };
  }

  public async componentDidMount() {
    const externalIModel = new ExternalIModel(this.props.projectName, this.props.imodelName);
    await externalIModel.openIModel();

    if (externalIModel.viewId && externalIModel.iModelConnection) {

}
}

export interface ViewportWidgetProps {
  projectName: string;
  imodelName: string;
}

interface ViewportWidgetState {
  viewId?: Id64String;
  iModelConnection?: IModelConnection;
}

/** Widget that displays a ViewportComponent or Loading message */
export class ViewportWidget extends React.Component {
  private _loading = IModelApp.i18n.translate("SampleApp:Test.loading");
  private _viewport: ScreenViewport | undefined;

  public readonly state: Readonly = {
    viewId: undefined,
    iModelConnection: undefined,
  };

  public async componentDidMount() {
    const externalIModel = new ExternalIModel(this.props.projectName, this.props.imodelName);
    await externalIModel.openIModel();

    if (externalIModel.viewId && externalIModel.iModelConnection) {
      this.setState({
        viewId: externalIModel.viewId,
        iModelConnection: externalIModel.iModelConnection,
      });

  private static enumAsPicklistMessage(str: string) { return IModelApp.i18n.translate("SampleApp:tools.ToolWithSettings.Options." + str); }
  private static _optionsName = "enumAsPicklist";

title={IModelApp.i18n.translate("UiFramework:realityData.bingMapSettings")}
        opened={this.state.opened}
        resizable={this.state.resizable}
        movable={this.state.movable}
        modal={this.state.overlay}
        buttonCluster={[
          { type: DialogButtonType.OK, onClick: () => { this._handleOK(); } },
          { type: DialogButtonType.Cancel, onClick: () => { this._handleCancel(); } },
        ]}
        onClose={() => this._handleCancel()}
        onEscape={() => this._handleCancel()}
        width={550}
        height={200}
      >
        <div>
          <span>{IModelApp.i18n.translate("UiFramework:realityData.elevationOffset")}</span>
          
        </div>
      
    );
  }

public render(): JSX.Element {
    return (
      <dialog title="{IModelApp.i18n.translate(&quot;UiFramework:realityData.bingMapSettings&quot;)}"> { this._handleOK(); } },
          { type: DialogButtonType.Cancel, onClick: () =&gt; { this._handleCancel(); } },
        ]}
        onClose={() =&gt; this._handleCancel()}
        onEscape={() =&gt; this._handleCancel()}
        width={550}
        height={200}
      &gt;
        <div>
          <span>{IModelApp.i18n.translate("UiFramework:realityData.elevationOffset")}</span>
          </div></dialog>

public render() {
    const groupLabel = IModelApp.i18n.translate("UiFramework:realityData.group") + ": ";
    const groupValue = (this.props.item.group || IModelApp.i18n.translate("UiFramework:realityData.notAvailable"));
    const groupInfo = groupLabel + groupValue;
    const sizeLabel = IModelApp.i18n.translate("UiFramework:realityData.size") + ": ";
    const sizeValue = (this.props.item.size + " " + IModelApp.i18n.translate("UiFramework:realityData.kilobytes")) || IModelApp.i18n.translate("UiFramework:realityData.notAvailable");
    const sizeInfo = sizeLabel + sizeValue;
    const tooltip = groupInfo + "\n" + sizeInfo;
    return (
      <li title="{tooltip}">
        <span>
        <a>
          <span>{this.props.item.name}</span>
          <span>{this.props.item.description}</span>
        </a>
      </span></li>
    );
  }
}

  public static getActionName(action: string) { return IModelApp.i18n.translate(this.namespace.name + ":actions." + action); }