I would like to introduce the alternative i18n libraries that I am developing.
- works with both Vanilla JS (
lingui-i18n ) and React ( lingui-react ) lingui-react is the only library that fully supports built-in components and formatting (see below).- build on top of MessageFormat ICU
- also includes CLI (
lingui-cli ) for creating message directories - it uses stream types and many compile-time checks to detect obvious errors in MessageFormat
Syntax
ICU MessageFormat is very flexible as it supports variables, plurals, ordinals, selection, number / date formatting, and is also extensible. However, complex messages are a little difficult to record.
lingui-i18n provides convenient syntax using ES6 template templates, and lingui-react provides similar syntax using React Components
Vanilla js
import { i18n } from 'lingui-i18n' i18n.t`Hello World` i18n.t`Hello, my name is ${name}` i18n.plural({ value: count, one: "# book", other: "# books" })
Additional examples in lingui-i18n docs
To react
import React from 'react' import { Trans, Plural } from 'lingui-react' class App extends React.Component { render() { const name = "Fred" const count = 42 return ( <div> // Static text <Trans>January</Trans> // Variables <Trans>Hello, my name is {name}</Trans> // Components <Trans>See the <a href="/more">description</a> below.</Trans> // Plurals <Plural value={count} zero={<strong>No books</strong>} one="# book" other="# books" /> </div> ) } }
docs are part of the js-lingui core documents.
Built-in components and advanced formatting
I started writing this library because I need a) simple syntax and b) full support for built-in components.
Both react-intl and react-i18next have very limited support for react-i18next text and inline components. You can use the basic html tags inside the components ( This is <strong>bold</strong> text. ) Or insert the components as variables ( This is {el} text. Where el = <strong>bold</strong> ).
The problem with the first approach is that you cannot use custom React components. The problem with the second approach is that the translator works with 2 messages instead of one ( This is {el} text. And bold ). This is actually pretty bad because you need to translate the whole sentence in order to maintain context.
With lingui-react you can use any React components inside the translations, and the message is retrieved in one piece:
<Trans>See the <Link to="/more">description</Link> below.</Trans> // for translator: See the <0>description</0> below.
Another advantage of this solution is that the component name and details are hidden in the extracted message. I remember how we spent a lot of time updating translations only after we changed the class to an internal element.
Just compare it to interpolation in response-i18next or react-intl .
Requirements
Both lingui-i18n and lingui-react require presets for everything to work. This is a problem if you want to use it with the Create React application, since you need to either push or fork react-scripts .