ReactIntl and ReactJS interantionalization with SimpleLocalize.io
Tags: javascript, typescript, react, i18n
Published: 2020-11-20 00:13:31

 ---
title: ReactIntl and ReactJS interantionalization with SimpleLocalize.io 
published: true
description: "Are you looking for an easy way add more languages to your app? I will show you how to add i18n to your app using FormatJS library and how to manage translations in bigger project!"
tags: [javascript, typescript, react, i18n]
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/cnfmtldato2vbc355td6.jpg
canonical_url: https://simplelocalize.io/blog/posts/formatjs-reactjs-internationalization/
 
---

# 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](https://github.com/i18next/i18next) which supports much more frameworks than FormatJS. 
If you are interested in i18next integration, you can [check our tutorial here](https://simplelocalize.io/blog/posts/i18next-reactjs-localization/).

# Create a sample project


I will start with something simple. I will create a new project using [create-react-app](https://github.com/facebook/create-react-app)

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

# Install dependencies
Add `react-intl` library to your newly created project.
```bash
# 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. 

```jsx
import React from 'react';

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

export default LanguageContext;
```

Read more about [React Context API](https://reactjs.org/docs/context.html)

# `react-intl` configuration
Let's create main configuration 

```jsx
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.

# Project `translationsUrl` variable

Create a [SimpleLocalize.io](https://simplelocalize.io) project to get your unique `messages` variable. For this demo project you can use the `messages` from the example above!

# Activate `react-intl` in application

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

```jsx
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

Checkout how use it.

```jsx
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;

```


## Using `<FormattedMessage/>` in application code

`<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:
```bash
TRANSLATION_WITH_CSS = This is my <strong>text</strong>
```

## Switching 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.

```jsx
 <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!

![formatjs_and_react_app_localization](https://dev-to-uploads.s3.amazonaws.com/i/fjaetss0rnkzeek6794c.gif) 

[Checkout live version](https://react-intl.simplelocalize.io)

Project code is available on [GitHub](https://github.com/simplelocalize/simplelocalize-react-intl).