Localization

The Editor widget provides support for localization, enabling developers to display labels, messages, and tooltips in different languages. This feature is essential in applications that target users speaking various languages. Localization can be achieved by configuring the widget with a custom set of translations.

The library provides three built-in locales:

• Chinese
• English
• German

You can also apply a custom locale.

Default locale

The English locale is applied by default:

Applying locales

To apply a built-in locale, import the Locale component from "@svar-ui/react-core", the locale package from "@svar-ui/core-locales", and a built-in locale from "@svar-ui/editor-locales", and then add the words prop for the required language to the Locale component.

Example:

import { Locale } from "@svar-ui/react-core";
import { cn } from "@svar-ui/editor-locales";
import { cn as cnCore } from "@svar-ui/core-locales";

<Locale words={{ ...cn, ...cnCore }}>
  <Editor />
</Locale>

The configuration below allows the Editor widget to display text in German. The myLang object contains key-value pairs where the keys are the default English strings used by the Editor, and the values are their German translations. The Locale component wraps the Editor and applies the specified translations.

import { Locale } from "@svar-ui/react-core";
import { Editor } from "@svar-ui/react-editor";
import "@svar-ui/react-editor/all.css";

const myLang = {
  "This field is required": "Dieses Feld ist erforderlich",
  "Invalid value": "Ungültiger Wert",
  Yes: "Ja",
  No: "Nein",
  Save: "Speichern",
  Cancel: "Abbrechen",
};

export default function App() {
  return (
    <Locale words={{ editor: myLang }}>
      <Editor />
    </Locale>
  );
}

To apply a custom locale, you need to create an object for the custom locale (or modify the existing one) and provide translations for all Editor text labels (it can be any language you need). You also need to add labels from the core and calendar components ("@svar-ui/core-locales"). Refer to Core localization for more details.

Example for the Korean language:

const ko = {
   editor: {
      "Invalid value": "잘못된 값",
      // other editor translations...
   },
   core:{ /* ... core translations ... */ },
   calendar: { /* ... calendar translations ... */ }
};