Localization in create-react-app

Internationalization or Localization is an important feature that helps to understand website content in different languages. It is more and more widely used nowadays. From developer point of view, mostly developers think that implementing internationalization is a challenging task but with modern front-end libraries (like React), it is not much difficult. In this article, I will help you to implement internationalization with React JS using create-react-app.

Prerequisites:

1. Node JS 
2. create-react-app

Packages used for internationalization:

1. react-i18next (version: 11.7.3)
2. i18next (version: 19.7.0)
3. i18next-http-backend (version: 1.0.21)
4. i18next-browser-languagedetector (version: 6.0.1)

Now generate React JS boilerplate using npx with create-react-app. Type the following command to your terminal:

npx create-react-app localization

You will get React JS boilerplate. Now we will add the required npm dependencies that will be used. Open terminal in your project and type the following command:

npm install --save i18next react-i18next i18next-http-backend i18next-browser-languagedetector

Description about npm packages we used:

react-i8next: react-i18next is a powerful internationalization framework for React / React Native which is based on i18next.

i8next: i18next is a very popular internationalization framework for browser or any other javascript environment (eg. node.js).

i18next-http-backend: i18next backend to be used in Node.js, in the browser and for Deno. It will load resources from a backend server using the XMLHttpRequest or the fetch API.

i18next-browser-languagedetector: i18next language detection plugin use to detect user language in the browser.

Implementing localization steps in our project:

Add i18next.js inside src folder of the project:

At line 10, we mention two languages ‘en’ for ‘english’ and ‘ur’ for ‘urdu’. At line 26 we added it to whitelist.

Inside src folder, we added React.Suspense and import i18next.js in our index.js file.

There are following four different ways to implement internationalization in your create-react-app:

1. Higher Order Component (HOC).
2. Render props.
3. Hooks.
4. Trans component.

I am using Hooks to localize this sample React app.

Now create a folder (named locales) inside public directory, create two sub folders (named en and ur). The sub folders en -> english language and ur -> urdu. We mentioned these languages in above i18next.js file. Then add translation.json files in those folders. Those json files will act as a resource to for react-i18next package.

localization
└── public
│   ├── locales 
│   │      ├── en
│   │      │    ├── translation.json
│   │      ├── ur
│   │      │    ├── translation.json

…/locales/en/translation.json file contains the english language mapping JSON object.

…/locales/ur/translation.json file contains the urdu language mapping JSON object.

Implement the localization in App.js file:

Change App.js from Class based component to Functional component. Now implement useTranslation Hook to make the t function available in the app component. I also added two buttons that will help to switch languages.

At line 8, I wrote a function that hanldes onClick event and help in switching languages between english and urdu.

Final output will be like:

Github link

shahmir811/localization