ESLint rule

e.g. @vend/eslint-config/i18n-strict rule
Disallow untranslatable rule

Suspense

Suspense-like container component that hides UI until we fetched all translations for application.

Wrap and unwrap

  • @transifex/react

    • useT hook will return a function to translate
    • T component
    • UT component, useful only when you want to wrap in html

  • @transifex/native

    • t function, use out of component

Context?

Is it a button or a title?
Can not assume translation will be the same when they are the same in English

  • When string is very short
  • When string cannot be shared: t(‘Type’) and t(‘Type’) have same key and will share same translation; t(‘Type’) and t(‘Type’, {_context: ‘Button’}) have different hash, so you can add a context to make it unique. We pay them by number of keys so try to reuse keys though.

Dynamic translations

Pass in variables as you need

Plural

Supports ICU message format, but only supports plural for “one” and “other”. If you need 0, use a ternary.

Do’s and Don’ts

  • Dynamic variables must be translated text
  • No more plural shortcuts like customer{count > 1 && 's'} as it could be different in other languages