React

This guide assumes that you are using react-localization module. If that is not the case, you can still use mooi and would only need to adjust your output format in a similar fashion.

Step 1 - Create a translations file

Create a mooi directory

mkdir mooi

Within that directory, create a translations.yaml file with your strings

# ./mooi/translations.yaml

languages:    # English is assumed by default, you don't need to list it
  - de
  - fr
  - ru
  # etc.
entries:
  - key: myTranslationKey
    value: Hello World
    description: A message that is shown on the main page
  # etc.

Step 2 - Define an output format

Within mooi directory, create a config.yaml file:

# ./mooi/config.yaml

formats:
  # We assume that your source code is located in "src" folder
  # In this example we are generating a JavaScript file, but you could
  # generate TypeScript as well
  - outputPath: src/localization/{{languageCode}}/generated.js
    format: |
      export default {
      {{#each translations}}
          {{key}}: "{{{value}}}",
      {{/each}}
      }

Step 3 - Run mooi

Run the following command:

npx mooi-cli translate --openAiKey {YOUR OPEN AI KEY}

As a result, you will see files generated in src/localization/ folder (i.e. src/localization/de/generated.js

Step 4 - Append generated translations to your localization

Now that our translations are generated, we advise you to simply append them to your main localization table.

const strings = new LocalizedStrings({
 en:{
   ...require('src/localization/en/generated'),
   // ...
   // Your other manually-provided translations
 },
 de: {
   ...require('src/localization/de/generated'),
   // ...
   // Your other manually-provided translations
 },
 // etc. for other languages
});

Alternatively, you could even forego this step and let mooi generate the whole LocalizedStrings object directly by updating config.yaml accordingly. However, we still recommend the way mentioned above as it allows you to easily mix mooi-generated content with manually provided keys.

And that is it, you are good to go!

Last updated