Localization
Editor API provides a simple way to localize your custom components, such as Tools, Options or Content Elements.
To do that you will need to describe your localizations in js
file, like so:
// locales.js
export default {
en: {
title: 'Custom Title'
},
ru: {
title: 'Кастомный заголовок'
}
};
⚠️ At this point our API supports only two locales:
en
andru
Connecting component to your locales
Now, when we have our localizations ready – we need to pass them to our components. Let's take a simple custom Option example:
// Defining Button
const CustomOption = () => (
<SetkaEditor.UI.Button>
Click me!
</SetkaEditor.UI.Button>
);
// Registering it
SetkaEditor.registerOption({
name: 'CustomOption',
component: CustomOption,
// Will be available only when Post is selected
elementsToShow: ['Post'],
})
After registering our component, we should get similar result:
Okay, our component and locales are ready, so let's update our custom Option with localization HOC:
import dict from './locales.js';
// tr –> special function, which takes
// a key of locale object as an argument
const CustomOptionComponent = ({tr}) => (
<SetkaEditor.UI.Button>
{tr('title')}
</SetkaEditor.UI.Button>
);
// HOC.withTranslation receives our locales object
// and the React component
const CustomOption =
SetkaEditor.HOC.withTranslation(dict)(CustomOptionComponent);
Seems like everything is ready. You must see similar results: