Translations

This page describes how to use our custom translation tools.

Applying a translated label

To translate a frontend component (e.g. .tsx or .jsx),

1. Fetch and set the latest translations.

npm run translation-sync

2. Import our hook, useInternationalization, and word bank, words.

import { useInternationalization } from '../../lib/i18next/translator'; // NOTE: File paths are relative
import words from '../../lib/i18next/words';

3. Initialize the hook at the start of your functional component.

const intl = useInternationalization();

4. Wrap any text in the hook, then replace the text with the corresponding key in the word bank.

intl(words.customers); // -> "Customers"

• If the text has input, you can use the second optional argument

intl(words.last_updated_date_x, props.date); // -> "Last Updated Date: 08/04/21

Adding a translation entry

To add a new translated label to the translations database,

1. Navigate to the "Adalo App Metadata: Translation" Airtable base, select the "Translation" table, then view the "New" view. You should see the following schema in the Airtable application:

2. Add a new record in the "New" group and fill in the required columns (e.g. EN, MM). Note: Be sure to take note of the translation database rules in the following section.

Translation database rules for consistency

In order to handle translations gracefully, there are a few simple rules that the code assumes.

• 1:1 Mapping: Each value of the EN column must be an atomic key. That is, the key should be a 1:1 mapping of what is displayed in the app.
  • Bad example: "Last Updated [Date] / Last marked done on": "နောက်ဆုံးမှတ်တမ်းတင်နေ့စွဲ"
  • Good example: "Last Updated [X]": "နောက်ဆုံးမှတ်တမ်းတင်နေ့စွဲ [X]"
• Bracket consistency: Brackets (e.g. [x]) are special characters that appear throughout the translations database indicating a variable input should be passed in. You must use these brackets in order for the app to interpret the input.
  • Anything else that isn't primary text should use parentheses (e.g. use DOB (i.e. Date of Birth) rather than DOB [i.e. Date of Birth]).
  • These brackets must appear in both the key columns (i.e. EN) and the value columns (e.g. MM).

Related links

• Translation Support Design Document

Questions or issues?

You can post questions or issues or feedback through GitHub issues.