tagged-translations
A dead simple babel-plugin
for translating texts in React applications.
Input
<Header> t`Hello !`</Header>
Output
<Header> `Xin chào 🤣!`</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
.babelrc
Via "plugins": "tagged-translations" "translationFile": "./translation.json" "tagName": "t"
translationFile
: the location of translation json.tagName
: translation tag name. Default:t
.
babel-plugin-macros
Via "plugins": "macros"
then import the macro and use it.
; const name = 'Vinh Le'; t`Hello `;
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.jsconst REACT_APP_LANGUAGE: language = processenv moduleexports = taggedTranslations: tagName: 't' translationFile: `./src/translations/buildTime/.json`
Contributing
- Run all tests
yarn test:dev
Notes
- We don't cover 100% cases: don't support
\n
characters.