This content originally appeared on DEV Community and was authored by Daniel Schreiber
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
- Set up react-intl with the offical FormatJS guide.
- 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!
This content originally appeared on DEV Community and was authored by Daniel Schreiber
Daniel Schreiber | Sciencx (2025-01-11T18:59:51+00:00) Integration for FormatJS/react-intl: Automated Translations with doloc. Retrieved from https://www.scien.cx/2025/01/11/integration-for-formatjs-react-intl-automated-translations-with-doloc/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.