FormatJS and React application localization

FormatJS and React application localization

Start with FormatJS library (originally react-intl)

Today I will show you how localize React application using formatjs.io library (originally yahoo/react-intl). Please notice that this is not the only popular library for React app localization. Second popular library is i18next which supports much more frameworks than FormatJS. If you are interested in i18next integration, you can check our tutorial here.

March 2021: Read FormatJS CLI integration guide and extract translation messages directly to the file.

Create a sample project

I will start with something simple. I will create a new project using create-react-app

yarn create react-app simplelocalize-react-intl-example

Install dependencies

Add react-intl library to your newly created project.

# Using NPM
npm i -S react react-intl

# Using yarn
yarn add react react-intl

Add Language Context

In this project I will use Context to keep translations and option to change language in realtime.

import React from 'react';

const LanguageContext = React.createContext("en");

export default LanguageContext;

Read more about React Context API

react-intl configuration

Let's create main configuration

import React from "react";
import {IntlProvider} from 'react-intl'
import LanguageContext from "./LanguageContext";

class SimpleLocalize extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      messages: undefined,
      language: "en"
    };
  }

  componentDidMount() {
    this.setupLanguageMessages(this.state.language);
  }

  setupLanguageMessages = (language) => {
    const projectToken = "5e13e3019cff4dc6abe36009445f0883";
    const translationsUrl = `https://cdn.simplelocalize.io/${projectToken}/_latest/${language}`;
    return fetch(translationsUrl)
      .then((data) => data.json())
      .then((messages) => this.setState({language, messages}));
  };

  render() {
    return (
      <LanguageContext.Provider
        value={{
          changeLanguage: (language) => this.setupLanguageMessages(language)
        }}>
        <IntlProvider
          locale={this.state.language}
          messages={this.state.messages}>
          {this.state.messages ? this.props.children : null}
        </IntlProvider>
      </LanguageContext.Provider>
    )
  }
}

export default SimpleLocalize;

This wrapper will keep translations in our LanguageContext and it will also provide a function to change language in fly.

Create project

Create a SimpleLocalize.io project to get your unique messages variable. For this demo project you can use the messages from the example above!

Wrap your application

Now lets use our newly created SimpleLocalize wrapper to provide translations for React application

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import SimpleLocalize from "./SimpleLocalize";

ReactDOM.render(
    <SimpleLocalize>
      <App/>
    </SimpleLocalize>,
  document.getElementById('root')
);

Done! React will now fetch translations from SimpleLocalize CDN and provide them to your app. Let's check how to use it in the source code.

Using translations in the app

Now, let's use translations, and create very simple web page.

Usage

Learn how use it.

import React from 'react';
import logo from './logo.svg';
import './App.css';
import {FormattedMessage} from "react-intl";
import LanguageContext from "./LanguageContext";

function App() {

  return (
    <LanguageContext.Consumer>
      {context => (<div className="App">
        <header className="App-header">
          <div>
            <p>
              <FormattedMessage id="USE_BUTTONS_BELOW"/>
            </p>
            <button onClick={() => context.changeLanguage("en")}>English</button>
            <button onClick={() => context.changeLanguage("es")}>Spanish</button>
            <button onClick={() => context.changeLanguage("pl")}>Polish</button>
            <hr/>
          </div>

          <img src={logo} className="App-logo" alt="logo"/>
          <p>
            <FormattedMessage id="DESCRIPTION"/>
          </p>

          <a
            className="App-link"
            href="https://simplelocalize.io"
            target="_blank"
            rel="noopener noreferrer"
          >
            <FormattedMessage id="LEARN_MORE"/>
          </a>
        </header>
      </div>)}
    </LanguageContext.Consumer>
  );
}

export default App;

FormattedMessage component

<FormattedMessage/> usage is very easy:

<FormattedMessage id="YOUR_TRANSLATION_KEY"/>

React will convert FormattedMessage tag into span tag and put concrete translation into it. You can also use <FormattedHTMLMessage id="TRANSLATION_WITH_CSS"/> which will also produce message with HTML inside span tag. Example translation key could look like following:

TRANSLATION_WITH_CSS = This is my <strong>text</strong>

Switch between languages

In presented example I used LanguageContext.Consumer to provide function. This function can trigger language change and fetch proper messages from the CDN.

<LanguageContext.Consumer>
      {context => (<div className="App">
        <header className="App-header">
          <div>
            <p>
              <FormattedMessage id="USE_BUTTONS_BELOW"/>
            </p>
            <button onClick={() => context.changeLanguage("en")}>English</button>
            <button onClick={() => context.changeLanguage("es")}>Spanish</button>
            <button onClick={() => context.changeLanguage("pl")}>Polish</button>
            <hr/>
          </div>
          //...
        </header>
      </div>)}
    </LanguageContext.Consumer>

You need Language.Consumer tag only in places where you would like to change the language. It's not needed for <FormattedMessages/> tags.

Let's check it!

Notice that translation is done in realtime! How cool is that? Very cool!

React Localization with formatjs

see live version

Project code is available on GitHub.


Share article
See all articles
Try SimpleLocalize i18n editor and hosting
localization workflow process

Relevant posts

How to create a multi-language website in GatsbyJS?

How to create a multi-language website in GatsbyJS?

Jakub PomykałabyJakubAugust 09, 2021

Create a multi-language GatsbyJS website with a few simple steps. A multi-language website is a great way for your company to reach a wider audience.

Read more
List of i18n libraries for React, React Native, and NextJS

List of i18n libraries for React, React Native, and NextJS

Jakub PomykałabyJakubFebruary 12, 2021

Best i18n libraries for React web, React Native, Expo and all other React apps. Check how to react localization should look like.

Read more
i18next and React application localization in 3 steps

i18next and React application localization in 3 steps

Jakub PomykałabyJakubOctober 01, 2020

How to localize ReactJS application with i18next internationalization library. Learn how to manage localization in software project

Read more
Internationalization tool for yahoo/react-intl

Internationalization tool for yahoo/react-intl

Kinga WojciechowskabyKingaJune 26, 2020

Are you struggling with keeping your app translations up to date and your dreams are filled with empty keys to translate? No worries, we know that feeling very well. To make the whole localisation process easier, we created a simple and effective solution which will improve the quality of translations and help you keep them in track!

Read more