Internationalization with React.js using Yahoo's react-intl

Question

I'm trying to support different languages in a React.js app and found react-intl to be a good candidate. They've been transitioning into V2 but I'm having a hard time figuring out how it all works together. The example app is too complex and involves a client/server architecture. I just want a single page without a server.

It looks like the steps are something like this:

• Define messages using react-intl's defineMessage
• Add locales using addLocaleData
• Build flattened message data into files for each locale using a build script

I've done these steps but I'm at a loss as to how to display the messages. I have my React component wrapped in <IntlProvider>. The react-intl V2 github issue is really long and I've been wading through it trying to find an answer. Can anyone provide a simple working example?

Answer 1

This is an example modified from the react-intl wiki

Looking at the code below, in the <IntlProvider> you will need to pass in a prop of messages={{post.title: "Hello World", post.body: "Amazing Content"}}. This would be the object with keys you have translated from your build script.

Switching the locale to 'en' would load the default messages. The addLocaleData adds data for translating number and date formats, not strings.

import React, {PropTypes} from 'react';
import ReactDOM from 'react-dom';

import {addLocaleData} from 'react-intl';
import en from 'react-intl/locale-data/en';
import fr from 'react-intl/locale-data/fr';
import es from 'react-intl/locale-data/es';
import pt from 'react-intl/locale-data/pt'

addLocaleData([...en, ...fr, ...es, ...pt]);

import {
    injectIntl,
    IntlProvider,
    FormattedRelative,
    FormattedMessage
} from 'react-intl';

const PostDate = injectIntl(({date, intl}) => (
    <span title={intl.formatDate(date)}>
        <FormattedRelative value={date}/>
    </span>
));

const App = ({post}) => (
    <div>
        <h1>{post.title}</h1>
        <p><PostDate date={post.date}/></p>
        <div>{post.body}</div>
    </div>
);

ReactDOM.render(
    <IntlProvider locale={'pt'} messages={{post.title: "Olá Mundo", post.body: "conteúdo surpreendente"}}>
        <App
            post={{
                title: <FormattedMessage id='post.title' defaultMessage='Hello, World!'} />,
                date: new Date(1459913574887),
                body: <FormattedMessage id='post.body' defaultMessage='Amazing Content!'} />,
            }}
        />
    </IntlProvider>,
    document.getElementById('container')
);

Answer 2

I think this answers the question. However it is based on using a 3rd party translation service and suggests to overwriting the translations file. What I personally did was to generate the file as per the script and used it to manually write my translations into another file. https://medium.freecodecamp.com/internationalization-in-react-7264738274a0