Integration for format.JS/react-intl: Automated Translations with doloc

Developing multilingual apps efficiently can be a real challenge - especially when working with various frameworks and tools. This is where doloc comes into play: a lightweight solution for automated translations that integrates seamlessly into your existing workflows. The focus is on good translations and no need for a glossary, as all texts automatically serve implicitly as a glossary.

Today, we’re excited to introduce our latest integration for format.JS/react-intl!

In this article, we’ll show you how to use doloc to automate translations in your format.JS/react-intl project and save valuable time. It is only two steps before you can extract an translate your texts automatically!

Format.JS/react-intl: Automating Translations with doloc

1. Setup react-intl with the offical Format.JS guide.


2. Add doloc to your workflow by adding the following to your package.json script:
   

{

  "scripts": {

    // other scripts ...

    "extract": "formatjs extract \"src/**/*.ts*\" --ignore=\"**/*.d.ts\" --out-file src/lang/en.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'",

    "doloc-fr": "curl https://api.doloc.io -H \"Authorization: Bearer $API_TOKEN\" -F source=\"@src/lang/en.json\" -F target=\"@src/lang/fr.json\" -o src/lang/fr.json",

    "doloc-es": "curl https://api.doloc.io -H \"Authorization: Bearer $API_TOKEN\" -F source=\"@src/lang/es.json\" -F target=\"@src/lang/es.json\" -o src/lang/es.json",

    "format-js-compile-en": "formatjs compile src/lang/en.json --ast --out-file src/compiled-lang/en.json",

    "format-js-compile-fr": "formatjs compile src/lang/fr.json --ast --out-file src/compiled-lang/fr.json",

    "format-js-compile-es": "formatjs compile src/lang/es.json --ast --out-file src/compiled-lang/es.json",

    "update-i18n": "npm run extract && npm run doloc-fr && npm run doloc-es && npm run format-js-compile-en && npm run format-js-compile-fr && npm run format-js-compile-es"

  }

}

The $API_TOKEN can be found in your doloc account.

Now run npm run update-i18n to extract new translations and automatically translate them.

To find more infos and details for configuration follow our guide on https://doloc.io/getting-started/frameworks/react-intl-format-js/.

There you'll also find information on how to handle explicit IDs.

Summary

By using the Format.JS/react-intl integration of doloc you have the following advantages:

• Easy Integration into the Development Workflow


• Instant Translations of Texts via API


• Consistent Style Without a Dictionary


• Reduced Translator Workload


• Accelerated Time to Market


• AND, of course: Good Translations!

Leave a comment and give us a message in case you need help or you have questions!