Introduction

In most web applications, you can find texts that are placed directly in the HTML or JSX. Obviously, this is a bad practice to add text directly there. It’s wiser to use a translation system instead that enables you to translate text outside your web application and provides support for multiple languages.

Imagine you have a headline that prompts the user to log in:

<h1>Please login!</h1>
CODE

This approach is simple but has several problems:

  • The text is hard-coded into the HTLM (or JSX).

  • Users need to modify the source code to change the text. That’s not easy for non-technical team members.

  • The text cannot be translated.

The better approach here would be to use a translation function and a key that can be replaced with the translated value:

<h1>{t('please_login')}</h1>
CODE

The key please_login can be easily replaced by some value that fits to the current locale, eg.

Key

Locale

Value

please_login

en-US

Please login!

please_login

de-DE

Bitte anmelden!

How to use translations inside of React components

To add a translation you can simply use the t() function like this:

import { useTranslation } from 'modules/common/hooks';

const { t } = useTranslation();

return (
  <Typography component="h1" variant="h3" gutterBottom>
    {t('login')}
  </Typography>
)
TYPESCRIPT

The useTranslation hook uses the currently selected locale and given key and executes a lookup into a dictionary file. If there is no translated value, then the key will be presented so that you can easily spot missing translations. Technically, the t() function is based on ➚next-i18next.

When you are implementing on top of ROQ One, this file is created during the deployment of your web application by running this command:

npm run translate
CODE

This command will fetch all translations from the translationKey() query of ROQ Platform and create one dictionary file for each locale in this directory:

roq-one/frontend/public/locales/{{LOCALE}}/common.json
CODE

If you would like to see translated content during local development, then you’ll need to run this command manually so that the dictionary file is created or updated. Otherwise, you’ll just see the keys in the user interface of your application.

Manage translations

All translations are saved in ROQ Platform. You can manage translations in your application using the Localization feature configuration screens in ROQ Console ➚console.roq.tech, where you or your team members can manage all required translated texts.