react-intl

Stats & Links

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

Since 2011, most recent release 14.0.1 on Jan 24, 2019
115 contributors, 1 github issue
33kb minified, 9kb gzipped
https://www.i18next.com/
https://github.com/i18next/react-i18next

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

Since January 2019, no releases yet
23 contributors, 8 github issues
https://facebookincubator.github.io/fbt/
https://github.com/facebookincubator/fbt

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.

Browser not supported