In this tutorial I am gonna guide you how you can introduce localization in your react app. Before diving into detail, let me tell you what is localization. Localizaion of your app is nothing but providing your app users’ a privilege to read app’s text in a language of their choice translated by you. Read more here

The codebase for this tutorial is https://github.com/debabrata100/react-localization

After the end of tutorial we should be able to achieve this

We will finish this in 4 steps:

Project setup and installation from scratch Add header, footer and language dropdown Define messages in different locales and initialize react-intl Render correct text for locale selected

NOTE: This tutorial is based on create-react-app

Install create-react-app on your machine $ npm i -g create-react-app

1. Project setup and installation

Initialize your react boilerplate

$ create-react-app react-localization

Add react-intl(2.8.0) to your project.

$ yarn add react-intl@2.8.0

Start your project $ yarn start

2. Add header, footer and language change dropdown

Let’s add some text in Header and Footer section where we will format our text to different locales as well as add some style to our application. We will also add a dropdown to select different locales and save the selected locale in react component state as well as in localStorage.

You can add header and footer text as below

<div className="App">

<h1>Localization in Create React App</h1>

<footer>Love you 3000</footer>

</div>

Now let’s add the dropdown to select a locale. For now let’s add only one locale as English

<select>

<option value="en">English</option>

</select>

Now let’s add some more languages in a list and render the list. We will subscribe to the event on change of dropdown as shown below.

const defaultLocale = localStorage['locale'] ? localStorage['locale'] : 'en'; // English is default locale if none //is set const localeList = [

{ name: 'English', code: 'en', lang: 'English' },

{ name: '中文', code: 'zh', lang: 'Chinese' },

{ name: 'русский', code: 'ru', lang: 'Russian' },

{ name: 'Française', code: 'fr', lang: 'French' }

]; const [currentLocale, setCurrentLocale] = useState(defaultLocale); const onChangeLanguage = (e) => {

const selectedLocale = e.target.value;

setCurrentLocale(selectedLocale);

localStorage.setItem('locale',selectedLocale)

} ... <select onChange={onChangeLanguage} defaultValue={currentLocale}>

{

localeList.map((locale,index)=>(

<option key={index} value={locale.code}>{locale.name}</option>

))

}

</select>

I have used react hooks. If you are not familiar with hooks, you can create a class component. I have used localStorage here to store the locale so that even if we refresh the page, we will set our locale value as last selected. We have assigned localStorage value to defaultLocale variable.

Add some styles to App.css as below

.App {

text-align: center;

}

footer{

margin-top: 24px;

display: flex;

flex-direction: column;

justify-content: center;

}

Post these changes our component should look as below

App.js