React

BabelEdit supports the following translation modules for React:

react-intl

A complete tutorial including a small demo project is available here: How to translate your React app with react-intl

The preferred layout for the react-intl project is to keep the translation files in your translations folder and name the json files with the translations according to the language code:

  • translations
    • de.json
    • en.json
    • fr.json

The preferred file format is JSON with namespaces in key (Flat JSON).

Extracting messages with babel-plugin-react-intl

You can extract your translations from your source files using babel-plugin-react-intl.

The plugin generates so-called message files that contain all IDs and strings to translate. BabelEdit can read these files including the description and default message.

BabelEdit loading react-intl message files extracted by babel-plugin-react-intl

If you don't use the extraction plugin simply skip this step. Setting the message file directory is later still possible from the project settings.

i18next

Please use a i18next project to work with react-intl.

LinguiJS

LinguiJS is supported with the JSON catalog file format. Please use a Generic JSON project to work with React and LinguiJS.