Integration for FormatJS/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 great 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 FormatJS/react-intl!

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

FormatJS/react-intl: Automating Translations with doloc

1. Set up react-intl with the offical FormatJS 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 FormatJS/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: Great translations!

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