DEV Community

Cover image for Integration for FormatJS/react-intl: Automated Translations with doloc
Daniel Schreiber
Daniel Schreiber

Posted on • Edited on

2

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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!

P.S. This also works for many other formats and frameworks!
Be sure to check out our guides for Android and Angular.

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay