🌐Internationalization

AFFiNE should be available to everyone everywhere, and we don't want language to be a barrier. So for this reason we have implemented internationalization features into our codebase.

Setup

You may refer to the below commented code as an example of how to use and implement i18n. The example code displays the 'text' key in the selected language and displays two language buttons for the user to switch between.

// Import our translation API
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 = () => {
    // Define a variable for our translation function
    const { t } = useTranslation();

    // This function allows for i18n on the page - updating the keys to the selected langauge
    const changeLanguage = (language: string) => {
        i18n.changeLanguage(language);
    };

    return (
        <div>
            // This usees our t function to display the 'text' key.
            <div>{t('Text')}</div>

            // These buttons change the current active language
            <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>
    );
};

If new keys are added to a file, they must be updated in the language file. See below for updating keys.

Updating keys

English is the base language and all other language files will be autogenerated from our i18n platform (when fully translated). This means it is only necessary to edit the EN language file to add/edit language strings.

The file format is JSON and can be found within the AFFiNE app under the following directory.

libs/datasource/i18n/src/resources/en.json