import { useTranslation } from '@toeverything/datasource/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.
Finally, the languages-download action will regularly download the latest translation resources from the Tolgee platform.

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

README.md

i18n

Usages

How the i18n workflow works?

How to sync translations manually

References