Demo for using doloc.io with react-intl / Format.JS

This is a simple demo for using doloc.io with react-intl.

It is recommended to follow our dedicated guide for react-intl to get started.

Pre-requisites

Install dependencies:

npm install

To update the translations, you need to set the API_TOKEN environment variable to your doloc.io API token. You can get a free API token by signing up at doloc.io.

export API_TOKEN=YOUR_API_TOKEN

(On Windows, make sure to adapt depending on your shell.)

Running the demo

To run the demo, execute:

npm run dev

This will start a development server at localhost:5173.

There you can see the demo in action. Switch between languages to see the translations change.

Adding translations

Add a new text to src/App.tsx - e.g.

<FormattedMessage
    id="yourId"
    defaultMessage="This is a new message"
    description="This is just for testing"/>

After adding the new message, you need to extract the new message and translate it.

To extract and translate the new text, there are two alternative ways to do it:

• Local workflow
• Using the CI workflow

Local workflow

Run the following command to extract the new message:

export API_TOKEN=YOUR_API_TOKEN
npm run update-i18n

Alternatively on Windows:

set API_TOKEN = YOUR_API_TOKEN
npm run update-i18n-win

Observe that the new message is added to the src/lang/en.json file and the new message is added to src/lang/fr.json and already translated!

Additionally, the compiled messages are updated in src/compiled-lang/en.json and src/compiled-lang/fr.json.

CI workflow

If you are using the CI workflow, you can simply push your changes to the repository. Check out the workflow definition in .github/workflows/localization.yml to see how the translations are updated.

When your change is merged into the main branch, the translations will be updated automatically and a new commit will be created with the updated translations.

Note: This workflow expects the DOLOC_API_TOKEN to be set as a secret in your repository.