Localisation using react-intl

08 March 2021

Introduction

React-Intl, part of the FormatJS set of libraries used for Internationalization. Internationalization is the mechanism used for localization for the visitor belonging to different regions and languages. To use the react-intl you need to wrap up you main component with <IntlProvider></IntlProvider>. This will allow low level components to access via props.

Installation

 $ yarn add react-intl or

 $ npm install --save react-intl

Wrap react app using IntlProvider

After installation we can wrap our root component using IntlProvider. To achieve the localisation we have to wrap the App component with IntlProvider as given below.

import React from 'react';

import App from './App';

import { Provider } from 'react-redux'

import { IntlProvider } from "react-intl";

import English from "./lang/new-en.json";

import Spanish from "./lang/es.json";




const messages = {

 en: English,

 es: Spanish

};




render(

 <IntlProvider locale="es" messages={messages.es}>

   <Provider store={store}>

     <App />

   </Provider>

 </IntlProvider>,

 document.getElementById('root')

)

Translations Text

Translation text contains the string that we want to show on the visitor window based on their locale.

Create separate file for different region and language given below

en.json

 
{

   "landing.LANDING_HEADING": {

       "defaultMessage": "Welcome to the world"

     }

}


es.json

{

   "landing.LANDING_HEADING": {

       "defaultMessage": "Bienvenido a la primera"

     }

}

Translate text using FormattedMessage

Now you have to wrap the text in  <FormattedMessage id={} value={} defaultMessage={} description={}/ >

Id: id accepts the common name for a text from all languages

Value: value accepts a unique value for the FormattedMessage tag

DefaultMessage: defaultMessage accepts a message for take which should display by default.

Description: description allow some information about the text.

import { FormattedMessage } from "react-intl";




<FormattedMessage

                  id="landing.LANDING_HEADING"

                  defaultMessage="Welcome To World"

                  description="Welcome To World"

                  value="Welcome To World"

          />

Now refresh your browser window and the welcome string changes save to reload.

Conclusion 

React-Intl is used to localize the react application. It provides an api and component to format text and content.  We should translate every user visible string such as tooltip and numbers also.

🔊 Listen