Localization Example

This example demonstrates how to implement multi-language support in Easy Email Pro editor.

Overview

The localization example shows how to:

• Switch between different languages
• Load translation files
• Update editor UI based on selected language

Code Example

import { useState, useMemo } from "react";
import { EmailEditorProvider, EmailTemplate } from "easy-email-pro-editor";
import { Retro } from "easy-email-pro-theme";
import { get } from "lodash";
import localsData from "easy-email-pro-localization/locales/locales.json";
import { Select } from "@arco-design/web-react";

export default function MyEditor() {
  const [lang, setLang] = useState<string>("en");

  const config = Retro.useCreateConfig({
    localeData: get(localsData, lang),
    // ... other config
  });

  return (
    <EmailEditorProvider {...config}>
      <Select
        value={lang}
        onChange={setLang}
        options={[
          { label: "English", value: "en" },
          { label: "中文简体", value: "zh-Hans" },
        ]}
      />
      <Retro.Layout key={lang} />
    </EmailEditorProvider>
  );
}

Key Points

• Use localeData prop to provide translations
• Load translation files from easy-email-pro-localization
• Update editor when language changes
• Use key prop to force re-render on language change