intl-generator
npm install intl-generator
This library is very good working with: https://github.com/yahoo/react-intl/ If you wan't to use it to generate your JSON file with another i18n library, you could try or just request/send a PR :)
How to use?
1 - First, you must to have an React Application and install https://github.com/yahoo/react-intl
2 - You must setup your react-intl
following the documentation.
3 - Inside your ./src
folder, create an _i18n
folder.
4 - Now, create a setupi18n.js
file in any folder of your preference with an structure like this:
!!!WARNING!!! this file won't be imported in your react application!!!
- Run this command
npm install intl-generator
const intlgeneratorSetup = const addTranslations exportLanguagesJSON = // - Obrigatório um idioma padrão
That file will generate an JSON file inside
./src/_i18n/
with this structure:
####### ./src/_i18n/translations.json
"en-US": "default.yourmessagegoeshere": "Your message goes here {name}" "default.welcome": "Welcome" "Hello World": "Hello World" "pt-BR": "default.yourmessagegoeshere": "Sua mensagem vai aqui {name}" "default.welcome": "Bem vindo" "Hello World": "Olá mundo"
That's exactly the format that react-intl
want to translate your project.
<FormattedMessage id="Hello World"/> // Hello World / Olá Mundo <FormattedMessage id="default.yourmessagegoeshere" values=name: <b>name</b>/> // Your message goes here {name} / Sua mensagem vai aqui {name}
5 - To generate that JSON whenever you update the setupi18n.js
with the react-scripts start
command running:
- Install these two libraries
npm install --save-dev concurrently nodemon
; - Add these two scripts to your
package.json
:
"start": "concurrently \"react-scripts start\" \"npm run i18n:build\"", "i18n:build": "nodemon ./setupi18n.js",
6 - After that, update your react-intl
provider to import that generated JSON:
####### ./src/_i18n/IntlProviderConfigured.js
; let locale = 'pt-BR' // Build your own strategy to get the locale// locale = 'en-US' console <IntlProvider locale=locale messages=translationslocale> children </IntlProvider>