bene : studio is a global consultancy, helping startups, enterprises and HealthTech companies to have better product
Manage translations online with React
At bene : studio we love knowledge sharing to help the community of professionals. With 10+ years and over 100 projects behind us, we have a vast amount of experience. This is why we have launched a knowledge base on our blog with regular updates of tutorials, best practices, and open source solutions.
These materials come from our internal workshops with our team of developers and engineers.
In a previous article, we shared that the easiest way to deal with internationalization in React is by extracting messages. However, you shouldn’t stop there. If you would like to manage the translations online instead of modifying the JSON files, we have a solution for you.
This application has an admin page that can be attached to any application’s admin page with some customization. It has 2 functional pages, one where you can manage the languages and the messages, and a page to test out the results.
As you can see in the src/extractMessages.js, instead of English, we store the default messages without categorizing them as any language. On this page, you can add languages to your application, which will be available somewhere on the site.
You can manage the messages by translating them on this page and add a description, a screenshot, or widget category. If there is no translation for a language, it will be substituted with the default message. Therefore the English column can be mostly unfilled.
There are 2 ways to add new messages. You can use the new message button (not recommended) or use the register-messages command. The last will extract the messages from the code and register them in the database. The server must be up and running (using MongoDB locally) to do this.
Refreshing the messages
When the server starts, it gets the messages from the database, fills the JSON files with them, and places them in the public folder. You can also do it manually after you have changed a message by clicking on the refresh messages button, or you can have your solution refresh the JSONs at each message edition.
You can check how your solution works on the demo page. If you change the language, a new message JSON will be downloaded.
Best practices and more
Reuse IntlProvider for multiple repositories
If you have microservices, you can create your own IntlProvider in a utils package and use it in all your microservices. The current locale can be transferred through the script tag and can also be listened to locale changes. You should also distribute the message JSONs between the widgets in this way.
Show children of IntlProvider after the messages are downloaded
To prevent showing the default messages while the JSON file is loading (especially for the non-default languages), it can be a good practice to hide the child components of the IntlProvider during loading. If you use server-side rendering, the content will be visible from the server-side during the loading, and when doing this, you shouldn’t refresh the app before the messages are loaded.
Export, import CSV for translators
It is always a challenge to add a new supported language to your application. For this, the CSV import and export functionality can be beneficial. You can export current translations (usually English) and share them with your translators who can easily convert phrases into another language. Without any other context, the translation needs to be fine-tuned by using the application, but the mass translation can serve as a good starting point. Current package contains simple CSV import-export functionality.
You can find the source code on our Github.
We invite everyone to leave feedback in the form of an issue or contribute by creating a pull request.
Our engineers Dani and Gábor contributed to this article.
Did you like this? Join us!
Want to ask some questions? Share them with us via e-mail to email@example.com and we can set up a talk with our engineers.
Fancy working for the studio where you can work on international projects and write articles like this? Check out our open positions!
Looking for a partner for your next project? Check out our services page to see what we do and let’s set up a free consultation.
Read moreSee all open source
How to Indicate Content Overflow with React Scrollfade
Learn about a component that dynamically fades out the bottom of an HTML element based on the scrollbar's position.
Internationalize your React App with React Intl
What is internationalization (i18n), and why is it important? Learn how to extract messages and generate auto-id.
Is well-formatted code important today?
A set of rules of what make a code beautiful and understandable to other developers.
Let bene : studio enhance
your digital product!