...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
| Table of Contents | ||||
|---|---|---|---|---|
|
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
...
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
...
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.
...
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.