Localization

To make your Zimlet available in multiple languages, you can use preact-i18n. This wiki page describes it's set-up.

Assuming you have a Zimlet called mytest you will need to add the following files:

• mytest/src/intl/en_US.json
• mytest/src/enhancers.js

The contents of enhancers.js is similar across all Zimlets:

import { withIntlWrapper } from '@zimbra-client/enhancers';

/** * @method withIntlWrapper * accepts three arguments which can be use to load zimlet locale. * @param {Object} - with following values * @param {Function} importFn which returns import with intl locale path of the zimlet. * @param {Boolean} showLoader Show loader on container or not * */ export const withIntl = () => withIntlWrapper( { importFn: locale => import(/* webpackMode: "eager" */./intl/${locale}.json), showLoader: false } );

In src/intl you have to provide JSON formatted language strings for all languages you wish to support. But at least you must always provide en_US.json as the default fallbacl language. Example content:

{ "mytest": { "title": "This is a test" } }

Now to make use of the title string in a Zimlet you have to load it like so:

import { withIntl } from '../../enhancers'; import { withText } from 'preact-i18n';

@withIntl() @withText({ title: 'mytest.title', }) export default class MyComponent extends Component {

render() { const { title } = this.props; return (

{title}

); } }

Now this component will return the string This is a test.