Locales (i18n)

The template's i18n uses the lingui package. It eliminates the need for keys and makes writing translations more efficient, while also utilizing .po files that can be used by translation software.

How to Use

To use in components, you should use the hook, and make sure to import from macro:

example.tsx

import { useLingui } from '@lingui/react/macro'

function Component() {
  const { t } = useLingui()

  const variable = 'example'

  return <Text text={t`This is example: ${variable}`} />
}

When you need to use it outside of components, you can import the t function directly

example.tsx

import { t } from '@lingui/core/macro'

const label = t`This is example`

Generating Translation Files

But if we don’t use keys, how is the translation done?

Run the following command to extract translations:

bun run lingui:extract

This will search for all texts using the t function from Lingui and generate files for each defined locale. In these files, you’ll notice that the ID is the message itself, and the value is also the message, so there’s no need to use keys anymore.

After that, you’ll need to run another command to compile the .po file and generate the .ts file that will be used in the application:

bun run lingui:compile

Multiple Translations

To manage the app's translations, you need to go to locales/index.ts. The file should look like this:

import { messages as enGB } from './en-GB'
import { messages as ptBR } from './pt-BR'

export const linguiLocales = {
  'en-GB': enGB,
  'pt-BR': ptBR,
}

export const linguiDefaultLocale = 'en-GB'

• linguiLocales: This is used to generate translations. To add a new one, simply add the key and run the previous commands.

• linguiDefaultLocale: This is the default locale being used in the code.

Automatic Translation

If you don't want to translate manually, we have a CLI command that will go through the locales folder and translate any .po files that still contain untranslated strings

bun run codeleap-cli lingui:translate

This command uses some configurations from codeleapcli.config.json:

{
  "translate": {
    "localesDir": "locales", // directory where the .po files are located
    "baseLanguage": "en-GB" // base language to be used for translating into other languages
  }
}