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.
