...

...

This page is meant to gather some tips for the development of the DatafariUI web app based on React.

i18n management

The library i18next is used to manage the translation key, translation file loading and management etc.

Basics

The “t” function is used to signify anything that must be translated and the argument of the function is used as the default display text if the key is not defined in the translation file. If a key is not translated in a language, English should be used as a default fallback.

...

import React from 'react';

import { useTranslation } from 'react-i18next';

const TestComponent = () => {
  const { t } = useTranslation();
   return (
    <div>{t('Hello World')}</div>
  )
};

export default TestComponent;

Localization files

Locales files are located in the files public/locales/{localeid}/translation.jsonwhere {localeid} is the name of any locale (it, fr, en, …). Files look like this:

{
  "AND": "",
  "Add a search field": "",
  "Advanced Search": "",
  "All Content": "",
  "All words": "",
  "At least one word": "",
  "Basic Search": "",
  "Clear Filter": "",
  "Click if you need to search in a specific field or want to combine with several fields or with basic search": "",
  "Date": "",
  "Delete Selected": "",
  "Document content not indexed": "",
  "Exact expression": "",
  "Export Current Results": "",
  "Extension": "",
  "FILTERS": "",
  "Favorite Document Path": "",
  "Favorite Document Title": "",
  "Feedbacks": "",
  "Field": "",
  "From": "",
  "Go": "",
  "Help": "",
  "Language": "",
  "Language selection": "",
  "Manage Alerts": "",
  "Manage Favorites": "",
  "Manage Saved Queries": "",
  "More Like This": "",
  "My Favorites": "",
  "Not these words": "",
  "OR": "",
  "Operator": "",
  "Relevance": "",
  "Results {{ start }} - {{ end }} of {{ total }}": "Resultats {{ start }} - {{ end }} de {{ total }}",
  "Save Current Query": "",
  "Save Query As Alert": "",
  "Search Tools": "",
  "Search for": "",
  "Search in a specific field": "",
  "Search tools": "",
  "Select All": "",
  "Show Less": "",
  "Show More": "",
  "Showing results for": "",
  "To": "",
  "Will NOT DISPLAY documents with AT LEAST ONE of these terms": "",
  "Will search for ALL the terms listed": "",
  "Will search for EXACTLY the sentence you entered": "",
  "Will search for documents with AT LEAST ONE of these terms": "",
  "anything": "",
  "less than a month": "",
  "less than a year": "",
  "less than five years": ""
}

On the left are the keys and on the right the translations. If any markup is present simply reproduce it without bothering about it, it represent some dynamic data that will be inserted at runtime. See one example below:

"Results {{ start }} - {{ end }} of {{ total }}": "Resultats {{ start }} - {{ end }} de {{ total }}",

Automatic extraction of keys from code files

Thanks to the babel-plugin-i18next-extractplugin, it is possible to automatically extract the translation keys from the code. To do so, run the following command from the root folder of the project:

...

Translating a new string

Let say we want to add the String “Welcome to Datafari” in the top menu of DatafariUI. We also want this String to be translated to French and German if those are the selected languages, else it should appear in English.

To do so, there are a few steps to follow:

1. Modify the top bar component to add the String calling the translation function

2. Adding the translations to the French and German localization files

3. Compiling DatafariUI

Modifying the top bar component

The top bar component is defined in src/Components/TopMenu/TopMenu.js.

...

Adding the translations to the localization files

The function argument is the English version of the text, so adding a translation to the English localization file is not necessary. However, it is still a good habit to create it. We will also add the French and German translations.

...

  "less than a month": "Weniger als 1 Monat",
  "less than a year": "Weniger als 1 Jahr",
  "less than five years": "Weniger als 5 Jahre",
  "Welcome to Datafari": "Willkommen bei Datafari"
}

Building the project and deploying

You can then build DatafariUI (React datafariUI: build, deploy and dev setups ) and deploy it with the new translated String.

Modifying a translated String in a deployed DatafariUI instance

If String already translated in DatafariUI end up being wrong for some reason, it is possible to correct them without rebuilding and deploying DatafariUI all over again.

...