Comparing tools for internationalisation of React App

Introduction to l10n, i18n, buzzwords and methodology

2019/01/28 2019/02/20    react javascript

Internationalisation, i18n, and localisation, l10n, are things one sometimes have to deal with when making SPAs, especially if they target broader markets. Rather than having to maintain several almost identical apps, a part from the messages that reaches the user, language tools help decouple these from the code, so that it can be used with several translations.

What is i18n and l10n?

here be words

Tools to be tested

The most popular library for managing this within the React sphere is react-intl, previously developed by Yahoo. Another popular library is react-i18next, a React binding for the huge i18next platform for i18n of apps. And, last but not least, @lingui/react is the official React binding for the new js-lingui library developed by a developer who found existing solution to be overly complicated.

Minimal working examples

I will make a minmal working example with Create React App, and then I will use the aforementioned libraries to translate the app. For the sake of completion, it will display a number and words in both singular and plural, as well as a button to increase the number with a label. There will also be a button to switch between localisations.

Inside App.js I add the following:

//App.js
import React, { Component } from "react";
import "./App.css";
class App extends Component { 
  constructor() {
    super();
    this.state = {
      Count: 0,
    };
  }
addNumber = () => {
    this.setState(prevState => ({ count: prevState.count + 1 }));
  };
  render() {
    const { count } = this.state;
    return (
      <>
        <header>
          <h1>Testing i18next</h1>
          <button>Other language</button>
        </header>
        <main>
          <p>I want {count} puppies</p>
          <button onClick={this.addNumber}>I want more puppies!</button>
        </main>
      </>
    );
  }
}

export default App;

And for the sake of our eyes I’ll add some CSS to make it look less ugly:

/* App.css */
header {
  background-color: #282c34;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}
main {
  background-color: wheat;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}