react-intl is a library to manage internationalization and pluralization support
for your react application. This involves multi-language support for both the static text but also things like variable numbers, words or names that change with application state.
react-intl provides an incredible amount of mature facility to perform these very tasks.
react-intl docs can be found here:
Below we see a
messages.js file for the
Footer component example. A
messages.js file should be included in any simple or container component that wants to use internationalization. You can add this support when you scaffold your component using this boilerplates scaffolding
All default English text for the component is contained here (e.g.
This project is licensed under the MIT license.), and is tagged with an ID (e.g.
boilerplate.components.Footer.license.message) in addition to it's object definition id (e.g.
This is set in
defineMessages function which is then exported for use in the component. You can read more about
Below is the example
Footer component. Here we see the component including the
messages.js file, which contains all the default component text, organized with ids (and optionally descriptions). We are also importing the
FormattedMessage component, which will display a given message from the
messages.js file in the selected language.
You will also notice a more complex use of
FormattedMessage for the author message where alternate or variable values (i.e.
author: <A href="https://twitter.com/mxstbr">Max Stoiber</A>,) are being injected, in this case it's a react component.
Extracting i18n JSON files
You can extract all i18n language within each component by running the following command:
This will extract all language into i18n JSON files in
Adding A Language
You can add a language by running the generate command:
Then enter the two character i18n standard language specifier (e.g. "fr", "de", "es" - without quotes). This will add in the necessary JSON language file and import statements for the language. Note, it is up to you to fill in the translations for the language.
Removing i18n and react-intl
You can remove
react-intl modules by first removing the
LanguageProvider object from the
app/app.js file and by either removing or not selecting the i18n text option during component scaffolding.
The packages associated with