Chapter 13: Internationalization (i18n)

TL;DR

1. Create the folder structure: In your pack's root, create locales/en/ and locales/es/ (and any other language you want to support).
2. Create translation files: Add a translation.json file inside each language folder.
   • en/translation.json: { "my_greeting": "Hello World" }
   • es/translation.json: { "my_greeting": "Hola Mundo" }
3. Use the hook: In your component, import and use the useTranslation hook.

   import { useTranslation } from 'react-i18next';
   
   function MyView() {
     const { t } = useTranslation();
     return <Heading>{t('my_greeting')}</Heading>;
   }

---

To reach a global audience, it's important to make your pack's user interface available in multiple languages. Worka has a built-in internationalization (i18n) system that makes this straightforward.

How i18n Works in Worka

The Worka Host application uses the popular i18next library to manage translations. When a user launches Worka, the host detects their preferred language from their operating system. When it loads your pack's UI, it automatically looks for the corresponding translation file inside your pack and makes it available to your components.

Your only responsibility is to provide the translation files.

Step 1: Create the Directory Structure

In the root of your pack, create a locales directory. Inside locales, create a separate folder for each language you want to support, using the two-letter ISO 639-1 language code.

For example, to support English and Spanish, your structure would look like this:

my-cool-pack/
└── locales/
    ├── en/              // English
    │   └── translation.json
    └── es/              // Spanish
        └── translation.json

Step 2: Add Your Translations

Inside each language folder, the translation.json file should contain a simple key-value map of your translation strings.

locales/en/translation.json

{
  "greeting": "Hello from my pack!",
  "submit_button": "Submit Data"
}

locales/es/translation.json

{
  "greeting": "¡Hola desde mi pack!",
  "submit_button": "Enviar Datos"
}

Step 3: Use Translations in Your UI

The react-i18next library and its useTranslation hook are provided globally by the Worka Host, just like Chakra UI. You can import and use it directly.

The hook gives you a function, conventionally named t, which you use to look up your translated strings by their key.

import { useTranslation } from 'react-i18next';
import { Heading, Button, VStack } from '@chakra-ui/react';

function TranslatedView() {
  // The hook automatically loads the right language
  const { t } = useTranslation();

  return (
    <VStack p={5} spacing={4}>
      <Heading>{t('greeting')}</Heading>
      <Button colorScheme="green">{t('submit_button')}</Button>
    </VStack>
  );
}

export default TranslatedView;

That's all there is to it. When a user with their language set to Spanish views this component, they will see "¡Hola desde mi pack!" and "Enviar Datos". For an English-speaking user, it will display the English versions. The system handles the language detection and loading for you.