Localization with React JS

Internationalization or Localization is important for a multinational company that has a website, which would be reachable to different languages understanding people. From a Developer perspective, some developers still think that internalization is a hard task to do. But in modern front end technology makes it easy to implement. React is the most popular front-end framework to build the website with it. i18next and react i18next makes the localization easier than ever. In this article, I will show you how to localization the website using React JS, i18next and react i18next packages.

Prerequisite

Package Needed For Localization

Using npx with create-react-app react npm boilerplate package to create the project from the terminal:

Configure Packages Steps by Steps

Install i18next and react-i18next the npm package as dependency from terminal

i18next is an internationalization-framework for JavaScript. i18next provides features such as (plurals, context, interpolation, format). It provides you with a complete solution to localize your product from web to mobile and desktop.

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

Then Install Browser Language Detector of npm packages

This is a i18next language detection plugin uses to detect user agent (Web Browser) language by using a cookie, localStorage, navigator, queryString, HTML tag, path, and subdomain.

Then install the Backend XHR for i18next react packages

Adding lazy loading for translations we need to use this npm package. It will load resources from a backend server using the XHR API.

Implementation steps Localization to Sample Project

Create the folder named locate in src directory, then create the language-wise folder in locate folder. I have created two folder name en -> for english language and jp -> for japanese language. Then add json files named translate in those folders. Those files would act as Resource of for react-i18next package.

.../en/translate.json contains the english language mapping JSON object.

.../jp/translate.json the file contains the japanese language mapping JSON object.

Add the i18n.js file in src the folder in an application (react-localization-example/src/i18n.js.

i18n Configuration file

Add the i18next provider in index.js the file so the whole application can get access to the Localization. The i18nextProvider takes an i18next instance via props i18n and passes that down using the context API.

In-line 5, I import all thei18n configuration from i18n.js file. In ReactDOM.render() function, Wrap the App main Component with I18nextProvider .

Four-Way to Implement the Localization with i18next-react

Using HOC(Higher Order Component)

To extend the component with a react-i18next package, we can use withTranslation as HOC , passing the additional react-i18next function t as props to React Component

Using Render Props

The render prop enables the developer to use the t function inside react component, Translate is the render props for react-i18next to enable this feature.

Using Hooks

If developer want to use react-i18next to the functional component, he or she needs to use the react-i18next hook function named useTranslation. Then use t function to translate content.

Using Trans Component

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

I am using Trans and HOC to Localize the example Samp.

Implement the Localization to App.js file

First, I have to change the App functional component to Class or Container Component, Implement the react-i18next HOC feature to makes the t function available in app component.

In-line 3, import withTranslation and Trans from react-i18next . Add the constructor and add the state name value to en so when we change the language through the radio control we can set the value state for so we can pass and preserve the Language related value navigate through different subcomponent of App component.

Implement the function named onLanguageHandle, which takes the radio group specific radio button value then change the language ofapp component content by i18n's changeLanguage(new language name which is resource i18n configuration file).

Implement the Radio Button Group Control (For Changing the Language Functionality) in to renderRadioButtonfunction in app the component at App.js file, so the user can easily switch Language through those radio buttons.

To fire the onLanguageChange() //event , we have to add it to Radio button onChange function. If we want the make the Radio button checked we check the state value in a checked attribute in the radio button.

Implement the localization function in render() function of aApp component

Add the renderRadioButton() function in react jsx syntax so the Radio button groups will render() in view. Then add <Trans> and t function in react js jsx to implement the Localization and Internalization of the React JS Component.

Full Code is below there

Browser output at localhost:3000 port

If you want to see the build version or production version is okay for localization in the development environment. Install the package below

Serve is a lightweight web server, so we can run our production build through this serve npm package. Then build the production-ready react app by following command

By this command it creates the build the folder in the root of the project with necessary html , js , assets , css file with a minimized version. Then run the following command to run the production version react app locally

Github link

--

--

Tariqul Islam have 9+ years of software development experience. He knows Python, Node Js and Java, C# , PHP.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tariqul Islam

Tariqul Islam have 9+ years of software development experience. He knows Python, Node Js and Java, C# , PHP.