Ashish Bhogesara
Creating A Multilingual App in React

Creating A Multilingual App in React

Ashish Bhogesara's photo
Ashish Bhogesara
·

4 min read

One of the major barriers in improving the accessibility of our apps is the language barrier. And sooner or later will need to build an app that is multilingual or at least bilingual to gain more user base for our application. Let's try to build a bilingual application that supports both the English Language as well as the Hindi Language.

1) First of all get the translations ready, create a JSON object with an identifier as property and its value in the language and store them inside a separate file for each language. the JSON object can be multi nested, but should only be key-value pairs in string.

// en.json
{
    "homepage" : {
        "title": "Hello",
        "body" : "Thank you for visiting us, We appreciate your time.",
    }
}

// hin.json
{
    "homepage" : {
        "title": "नमस्ते",
        "body" : "हमें आने के लिए धन्यवाद, हम आपके समय की सराहना करते हैं",
    }
}

2) Create a new folder 'translations' inside the public folder and move the above language JSON files inside it.

3) Install the multilingual-translate packaeg for react.

npm i multilingual-translate --save

4) Wrapper the root component in our case the App component with MultiLingualTranslationWrapper component from the 'multilingual-translate' package

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import MultiLingualTranslationWrapper from 'multilingual-translate'

ReactDOM.render(
  <React.StrictMode>
    <MultiLingualTranslationWrapper defLang="en" folderURL={process.env.PUBLIC_URL + '/translations'}>
      <App />
    </MultiLingualTranslationWrapper>
  </React.StrictMode>,
  document.getElementById('root')
);

There are two props of the MultiLingualTranslationWrapper the 'defLang' helps to set the initial language for the app the value should match the name of the translation file without '.json'. The second parameter is the folder URL where our translations are stored.

5) To get the translations inside the component will use the useTranslate hook from the 'multilingual-translate' package. The hook will provide us a translate function that will accept the argument as the identifier from the JSON file and return the value from the language file of the selected language.

import { useTranslate  } from 'multilingual-translate';

function App() {
     let [translate] = useTranslate();

    return (
        <>
          <h4> {translate('homepage.title')} </h4>
           <p> {translate('homepage.body')} </p>
       </>
     )
}

export default App;

6) Now. we got the language, let's implement the functionality to change the language it, we can do it using the changeLanguage function from the useTranslate hook. 

import { useTranslate  } from 'multilingual-translate';

function App() {
     let [translate, changeLanguage] = useTranslate();

    return (
        <>
          <h4> {translate('homepage.title')} </h4>
           <p> {translate('homepage.body')} </p>

          <button type="button" onClick={() => changeLanguage('en')}> English </button>
          <button type="button" onClick={() => changeLanguage('hin')}> Hindi </button>
       </>
     )
}

export default App;

That's it, we have successfully implemented multilingual functionality in our react application.

The Demo project can be found example github

React