4 min. read

Translation.io for React and JavaScript using Lingui

Michaël Hoste

Founder & CEO

Who is Michaël?

Michaël is the founder of Translation.io. He is always interested in hearing your feedback on the product.

Feel free to get in touch: michael@translation.io

For many years we had been looking for the best way to localize a JavaScript and/or React project with Translation.io.

Most of the solutions we found seemed too complex for developers, owing to their verbose syntax or keys which have to be created manually. They were also over-complicated for translators who sometimes would have to translate such phrases as:

{count, plural, =0{no results} one{one result} other{# results} }

All these issues vanished the day we discovered LinguiJS.

Lingui is an extremely light, open-source library which can be used to localize a JavaScript or React application. The code remains clean and legible and there is no need to manage the keys manually.

While its low-level API is similar to that of React Intl (FormatJS), it is possible to access a higher level of abstraction which makes the code more compact, meaning that translators don’t have to translate any complex ICU MessageFormat syntax.

But enough talk! The following examples speak louder than words:

React JSX Syntax

<!-- Regular -->
<Trans>
  Text to be translated
</Trans>

<!-- Variable Interpolation -->
<Trans>
  Hello {name}
</Trans>

<!-- Simple HTML Tags. -->
<!-- Translators will see "Text with <0>HTML</0> tags" -->
<Trans>
  Text with <em>HTML</em> tags
</Trans>

<!-- Complex HTML Tags -->
<!-- Translators will see "Text with a <0>link</0>" -->
<Trans>
  Text with a
  <a href="https://google.com" target="_blank">link</a>
</Trans>

<!-- Plural -->
<!-- Translators will see "You've got 1 message" and "You've got # messages" -->
<Plural
  value={count}
  one="You've got 1 message"
  other="You've got # messages"
/>

JavaScript Syntax

// Regular
t`Text to be translated`

// Variable Interpolation
t`Hello ${name}`

// Plural
plural(count, {
  one: "You've got 1 message",
  other: "You've got # messages"
})

// Variable interpolation
plural(count, {
  one: `Hello ${name}, you've got 1 message`,
  other: `Hello ${name}, you've got # messages`
})

The advantage of Translation.io is that translators can see the exact number of plural forms in the current target language, as well as some examples to help them. They don’t need to translate unmeaningful syntax or add the missing forms themselves.

In this example, Czech uses 3 plural forms: one, few and other.

Plural forms example for Czech

Rather than create our own plugin to use with Lingui, we have chosen to directly integrate our synchronization workflow into their open-source code, while making it easy for other competitor cloud providers to integrate their workflow later on.

We are convinced that Lingui is the solution for efficient localization in JavaScript and React, which is why we have put our money where our mouth is: we are now one of their principal sponsor, and plan to continue to support them for a long time to come.

Check out these links to get started: