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
.

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.
Some links to get started: