Comparison of i18n libraries for React

Owned by Albemarle (Deactivated)
Last updated: Jun 27, 2019
2 min read

react-intl

  • Since June 2014, most recent release 2.8.0 on Jan 16, 2019
  • Yahoo, 50 contributors, 199 github issues, but as of fall 2018 Yahoo isn't providing a lot of support for it
  • https://github.com/yahoo/react-intl

Existing edX use

  • Paragon (documented in Paragon ADR-2)
  • studio-frontend (with a wrapper for accessibility)

What your code looks like

render() {
    const {name, unreadCount} = this.state;

    return (
        <p>
            <FormattedMessage
                id="welcome"
                defaultMessage={`Hello {name}, you have {unreadCount, number} {unreadCount, plural,
                  one {message}
                  other {messages}
                }`}
                values={{name: <b>{name}</b>, unreadCount}}
            />
        </p>
    );
}

react-intl Notes

  • Handles dates, numbers, strings, plurals. 
  • Uses the React Context API. 
  • Getting just a translated string (e.g., for a button label or an aria attribute) is really ugly (see this issue).  (Could use Context API to clean this a little.)
  • Outputs JSON with ICU Plurals (see String Formatting API)
  • Transifex upload of JSON with ICU missing translator comments, which must be uploaded via Transifex API afterwards.

i18next

Stats & Links

Existing edX use

  • I thought someone was using this, but apparently not

What your code looks like

render() {
    const {name, unreadCount} = this.state;

    return (
        <div>{t('simpleContent')}</div>
        <Trans i18nKey="userMessagesUnread" count={unreadCount}>
            Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{unreadCount}} unread message. <Link to="/msgs">Go to messages</Link>.
        </Trans>
    );
}

i18next Notes

  • Handles dates, numbers, strings, plurals. 
  • Exposes a function to get just a translated string, instead of an entire React element.
  • Plugins that handle language detection, translation loading, fallback algorithms.
  • Can't handle translator comments via extractors.  Would need a custom solution.
  • Outputs i18next JSON, which Transifex can't work with, so requires additional conversion to/from a Transifex supported format (e.g. gettext PO format).
    • WARNING: conversion to/from PO may mess up plurals.

Facebook

Stats & Links

Existing edX use

  • none

What your code looks like

<fbt desc="param example">
    Hello, <fbt:param name="name">{person.getName()}</fbt:param>.
</fbt>

Facebook Notes

Handles dates, numbers, strings, plurals.  Some interesting functionality for pronouns.