Developer localization guide

Overview

All developers need to follow this guide when they add any texts which needs to be translated into other languages.

Localization structure

We have implemented localization with i18n and its structure is like the one below.

As you can see, every language has its own translation.json.

translation.json is a json file which contains all the texts which would be displayed on UI.

This json file structure is like the one below.

locales/en/translation.json

{
	“menu”: {

		“home”: “Home”,
		“admin”: “Admin”
			…
	},
	"languages": {
		"french": "French",
		"english": "English",
    		"portuguese": "Portuguese"
	},
		…
}

Every translation.json file has the exactly the same structure and fields.

The difference is only the value of the field like this.

locales/fr/translation.json

{
	“menu”: {
		“home”: “Domicile”,
		“admin”: “Administratrice”
			…
	},
	"languages": {
		"french": "Français",
		"english": "Anglais",
    		"portuguese": "Portugais"
	},
		…
}

Development steps

When you need to add any texts which would be displayed on UI, you have to follow the steps below.

First, add the text in the translation.json file of each language.

For example, think you try to add “Clients” menu. Then you have to add it in json files like this.

locales/en/translation.json

{
	“menu”: {
		“home”: “Home”,
		“admin”: “Admin”,
		"clients": "Clients",
			…
	},
	"languages": {
		"french": "French",
		"english": "English",
    		"portuguese": "Portuguese"
	},
		…
}

locales/fr/translation.json

{
	“menu”: {
		“home”: “Domicile”,
		“admin”: “Administratrice”,
		"clients": "Clientes",
			…
	},
	"languages": {
		"french": "Français",
		"english": "Anglais",
    		"portuguese": "Portugais"
	},
		…
}

Next, you have to use useTranslate() hook function for getting t function which translates your content.

import { useTranslation } from 'react-i18next'
…
const { t } = useTranslation()
…

title={t('menus.clients)}

Then, if you change the language option, the contents including the “Clients” menu would be translated.

How to add new language?

First, add a new folder inside app/locales/ and create the translation.json file in it.

Next, in app/i18n.js file, import the json file and add it in resources object like below.