Awesome

tagged-translations

A dead simple babel-plugin for translating texts in React applications.

Input

<Header>
  {t`Hello ${name}!`}
</Header>

Output

<Header>
  {`Xin chào ${name} 🤣!`}
</Header>

Features

• Build time translation: build app with minimal footprint.
• Based on ES6 tagged template literals: really helpful for readability/ maintaination/ integrations.
• Translations are configured in a JSON file.

Usage

Install yarn add --dev tagged-translations

then configure

Via .babelrc

{
  "plugins": [
    ["tagged-translations", {
      "translationFile": "./translation.json",
      "tagName": "t"
    }]
  ]
}

• translationFile: the location of translation json.
• tagName: translation tag name. Default: t.

Via babel-plugin-macros

{
  "plugins": ["macros"]
}

then import the macro and use it.

import t from 'tagged-translations/macro';

const name = 'Vinh Le';

t`Hello ${name}`;

Multiple translations

In order to support multiple translations, we could specify the translation file based on an environment variable in the build time.

// babel-plugin-macros.config.js
const { REACT_APP_LANGUAGE: language } = process.env

module.exports = {
  taggedTranslations: {
    tagName: 't',
    translationFile: `./src/translations/buildTime/${language}.json`
  }
}

Contributing

• Run all tests yarn test:dev

Notes

• We don't cover 100% cases: don't support \n characters.