How Design & AI Is Transforming Product Engineering

Home

Build your Beta

Beyond PMF. Your True 1.0

Product Expansion

Product Transformation

Our Work

Our Process

About us

Work Insights

As per Wikipedia, Internationalization is the process of designing a software application so that it can be adapted to various languages and regions without engineering changes.

Developers and businesses can no longer afford to limit the content to their default language. Also, internationalizing- apps and websites- is better than hard-coding English-only strings, because it enables users to function within the app in their native mother tongue. Simultaneously, it improves the user experience and overall diversity, inclusion, and accessibility of the app.

On the other hand, some developers still think that internationalization is a hard task to do. But, modern front end technology makes it easy to implement. Moreover, React is the most popular front-end framework to build a website with it. i18next and react i18next makes the localization easier than ever.

In this blog, I would like to share my knowledge of the internationalization concept in React.

Let’s begin…

Internationalization is the process of designing and preparing software products (apps) to support multiple locales, languages, and regions. By internationalizing a codebase, developers and businesses can expand their user base and access to a wider audience.

Well, you might think internationalization and localization are the same. But, it is not.

Localization is a process of adapting internationalized software for a specific region or language by adding local specific components ( such as English in the US (en-US) or English in the UK (en-UK) ) and translating text.

STEPS FOR INTERNATIONALIZATION:

STEP 1: Install required dependencies

We expect you to have an existing react application otherwise create one using create-react-app.

Install both react-i18next and i18next packages:

npm install react-i18next i18next –save

STEP 2: String Localization

The json files are created for all languages.

A unique identifier is attached to each translated string called the “Localization Identifier”. It is used to search the json and locate the value of the string in different languages.

We can have multiple json files for a single language. For example, we can have different json files for different modules in one language.

Examples of json files:

‘./locate/jp/translate.json’ file:

{
“title”: “著者名”,
“value”: “タリクル”
}

‘./locate/en/translate.json’ file:

{
“title”: “Author Name”,
“value”: “Tariqul”
}

STEP 3: Configure i18next

Create a new file i18n.js beside your index.js containing following content:

I18n.js file

import i18n from ‘i18next’
import { initReactI18next } from ‘react-i18next’
import languageEN from ‘./locate/en/translate.json’
import languageJP from ‘./locate/jp/translate.json’
const resources = {
en: languageEN,
jp: languageJP
}
export default i18n.use(initReactI18next).init({
resources,
//default language when load the website in browser  lng: ‘en’,  //When react i18next is not finding any language to as default in browser.
fallbackLng: ‘en’,         //For the unique keys must not be separated by dot,comma etc.
keySeparator: false,   //allows integration of dynamic values into your translations
interpolation: {
escapeValue: false, //get escaped to mitigate XSS attacks  },
})

The interesting part here is that by i18n.use(initReactI18next) we pass the i18n instance to react-i18next which will make it available for all the components via the context api.

If we want to have multiple json files for single language, we can include them in above resources constant as shown in given example:

const resources = {
en:{
file1: languageEN, //file1 and file2 are user-defined names.
file2: languageEN1,
}
jp:
{
file1: languageJP,
file2: languageJP1
}
}

Index.js file

We need to import i18n in index.js file

import React, { Component } from “react”;
import ReactDOM from “react-dom”;
import ‘./i18n’;
import App from ‘./App’;
// append app to dom
ReactDOM.render(
<App />,
document.getElementById(“root”)
);

STEP 4: Translate content

Content Translation can be done using one of the following four methods.

1.Using Hook

In this method, we use the useTranslation hook.

The t function is the main function in i18next to translate content.

Example:

import React from ‘react’;
// the hook
import { useTranslation } from ‘react-i18next’;
function MyComponent () {
const { t, i18n } = useTranslation();
return <h1>{t(‘Welcome to React’)}</h1>
}

NOTE: If we have multiple files for one language, we can mention the required file name (ex: file1, file2, etc. as mentioned in resources constant in i18n.js file) inside useTranslation hook.

Example: const { t, i18n } = useTranslation(‘file1’);

2.Using the Trans component

The Trans component is the best way to translate a JSX tree in one translation. This enables you to easily translate text containing a link component or formatting like <strong>

Example:

import React from ‘react’;
import { Trans } from ‘react-i18next’;
export default function MyComponent () {
return <Trans><h1>Welcome to React</h1></Trans>
}

3.Using the HOC

Using higher order components is one of the most used methods to extend existing components by passing additional props to them.

The t function in i18next the main function to translate content.

Example:

import React from ‘react’;
// the hoc
import { withTranslation } from ‘react-i18next’;
function MyComponent ({ t }) {
return <h1>{t(‘Welcome to React’)}</h1>
}
export default withTranslation()(MyComponent);

4.Using the render prop:

The render prop enables you to use the t function inside your component.

Example:

import React from ‘react’;
// the render prop
import { Translation } from ‘react-i18next’;
export default function MyComponent () {
return (
<Translation>
{
t => <h1>{t(‘Welcome to React’)}</h1>
}
</Translation>
)
}

react-i18next is a powerful internationalization framework for React. However, writing code to localize your app is one task, but working with translations is a completely different story. It is quite hard to support different languages while working on a big project. So it would be better to adopt localization at the beginning of the project.

I hope this gets you started in the right way when building your React application with i18next.

To know more about us, have a look at our extensive portfolio page.

Your next read

10 Metrics to Measure the Success of Your UX Project

As per Wikipedia, Internationalization is the process of designing a software application so that it...

As per Wikipedia, Internationalization is the process of designing a software application so that it can be adapted to various languages and regions without engineering...

Sushree

18 Oct, 2020