I18n
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.
The complete react-intl
docs can be found here:
Usage
Below we see the messages.js
file for the Footer
component example. The 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
plop
system.
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 its object definition id (e.g. licenseMessage
).
This is set in react-intl
's defineMessages
function which is then exported for use in the
component. You can read more about defineMessages
here:
You can set a local or a global scope variable, to define a prepend object structure.
/*
* Footer Messages
*
* This contains all the text for the Footer component.
*/
import { defineMessages } from 'react-intl';
export const scope = 'boilerplate.components.Footer';
export default defineMessages({
licenseMessage: {
id: `${scope}.license.message`, // equals 'boilerplate.components.Footer.license.message'
defaultMessage: 'This project is licensed under the MIT license.',
},
authorMessage: {
id: `${scope}.author.message`,
defaultMessage: `
Made with love by {author}.
`,
},
});
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 react component.
import React from 'react';
import messages from './modules/messages';
import A from 'components/A';
import styles from './styles.css';
import { FormattedMessage } from 'react-intl';
function Footer() {
return (
<footer className={styles.footer}>
<section>
<p>
<FormattedMessage {...messages.licenseMessage} />
</p>
</section>
<section>
<p>
<FormattedMessage
{...messages.authorMessage}
values={{
author: <A href="https://twitter.com/mxstbr">Max Stoiber</A>,
}}
/>
</p>
</section>
</footer>
);
}
export default Footer;
Adding A Language
You can add a language by running the generation command:
yarn generate language
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.