import { useTranslation } from '@affine/i18n';

// src/resources/en.json
// {
//     'Text': 'some text',
//     'Switch to language': 'Switch to {{language}}', // <- you can interpolation by curly brackets
// };

const App = () => {
  const { t } = useTranslation();

  const changeLanguage = (language: string) => {
    i18n.changeLanguage(language);
  };

  return (
    <div>
      <div>{t('Text')}</div>

      <button onClick={() => changeLanguage('en')}>
        {t('Switch to language', { language: 'en' })}
      </button>
      <button onClick={() => changeLanguage('zh-Hans')}>
        {t('Switch to language', { language: 'zh-Hans' })}
      </button>
    </div>
  );
};

How the i18n workflow works?

When the src/resources/en.json(base language) updated and merged to the develop branch, will trigger the languages-sync action.
The languages-sync action will check the base language and add missing translations to the Tolgee platform.
This way, partners from the community can update the translations.

How to sync translations manually

Set token as environment variable

export TOLGEE_API_KEY=tgpak_XXXXXXX

Run the sync-languages:check to check all languages
Run the sync-languages script to add new keys to the Tolgee platform
Run the download-resources script to download the latest full-translation translation resources from the Tolgee platform

README.md

i18n

Usages

How the i18n workflow works?

How to sync translations manually

References