The ability to use a system across different locals based on the region.
✅According to W3C:
Internalization is the design and development of a product, application or document content that enables easy localization for target audiences that vary in culture, region or language.
Internalization is often written in English as i18n, where 18 is the number of letters between i and n in the English word.
Localization is sometimes written in English as l10n, where 10 is the number of letters in the English word between l and n.
Translation using React-intl
Translations work with plain text only not code. So the translations with variables need to be formatted and split into String template and runtime data.
<span>Hello {name}</span>
The String template goes to translator and runtime data remains in code. This is achieved by the Standard ICU (International Components For Unicode) Message Format.
Types of formatting
- Variables:
Hello {name}
Hello John2. Date/Number formatting:
Today is {now, date}
Today is 9th August 20203. Formatting Options:
Interest rate is {rate, number, percent}
Interest rate is 5%4. Pluralization:
{count, plural, one {# book} other {# books}}
1 book, 2 booksSteps in translation
- Message Declaration
- Message Extraction
- Make Catalog
- Compiling Messages
- Message Distribution
📔 Message Declaration
There are three ways to declare messages:
- Using imperative API
intl.formatMessage
2. Using React API <FormattedMessage/>
3. Pre-declaring using defineMessage for later consumption (less recommended)
🧲Message Extraction
It is the process of extracting all messages that have been declared into a single JSON file.
For the purpose of extracting the messages there are two options:
Installation
npm install formatjs
Usage
Add the below script to package.json
--out-file [path]
The target file path where the plugin will output an aggregated .json file of all the translations from the files supplied. This flag will ignore --messages-dir
It extracts the messages to lang folder inside the src folder.
--id-interpolation-pattern [pattern]
If certain message descriptors don't have id, this pattern will be used to automatically generate IDs for them. Default to [contenthash:5].
Example output:
Installation
npm install babel-plugin-react-intl
Usage
Create a .babelrc file with the below content:
Add the below script to package.json
Example output:
📚Make Catalog
The extracted message from the previous step is sent to a TMS (Translation Management System) to generate different translated locals.
This can be achieved with any of the Translation Vendors.
For integration with Google Translate API: react-intl-auto-translate
Example of fr.json
💥Compiling Messages
The translated messages are then processed to react intl format.
Installation
npm install formatjs
Usage
Add the below script to package.json
The below command compiles a single file:
The gulpfile.js compiles all the files from lang folder to compiled-lang folder.
Compiled fr.json
📫Message Distribution
Below is the projected structure followed:
The current local is decided based on the browser locale:
Dynamic import is used to load the specific compiled-lang file based on the language:
