FormatJS

FormatJS: changing translations in realtime

Here you will learn how to configure FormatJS with translation hosting feature. Translation hosting allow your users to see translated messages right away when you click the 'Publish' button in the translation editor. Later, you will learn how to use <FormattedMessage/> and intl object.

Translation live updates

Let's start with learning how to integrate translation hosting feature to update translations right away when you click 'Publish' in the translation editor and a general configuration.

Install dependencies

Add react-intl library to your React app project.

# Using NPM
npm i -S react react-intl

# Using yarn
yarn add react react-intl

Get a project token

Create a project in SimpleLocalize, and get your project token from the 'Integrations' tab. You will need the token to fetch translations from the server.

simplelocalize project token location

react-intl configuration

Create configuration like below:

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 = "<YOUR_PROJECT_TOKEN>";
    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;

Wrap main component

Wrap your main application component with the created SimpleLocalize component 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')
);

FormattedMessage usage

<FormattedMessage id="YOUR_TRANSLATION_KEY"/>

React will convert the FormattedMessage tag into a 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>

Switching between languages

Use LanguageContext.Consumer to switch languages.

<LanguageContext.Consumer>
  {context => (<div className="App">
    <button onClick={() => context.changeLanguage("en")}>English</button>
    <button onClick={() => context.changeLanguage("es")}>Spanish</button>
  </div>)}
</LanguageContext.Consumer>

Full application code is available on GitHub. Visit simplelocalize/simplelocalize-react-intl repository.

Edit your translations

Now you can edit messages in the translation editor and publish them using 'Save & Publish'. Your users will automatically see the changes!

formatjs translation management

Resources:

Guide: FormatJS CLI integration - extract translation keys with FormatJS CLI
Guide: SimpleLocalize CLI integration - extract translation keys with SimpleLocalize CLI
Blog post: FormatJS and React application localization - read blog post about FormatJS and React localization
Docs: FormatJS - FormatJS documentation page

Table of content