Multilingual website in ReactJS

Question

I'm searching for a way to translate a complete website (Homepage, about us, product pages, contact, FAQ, ..) in multiple languages. The website is build in ReactJS with Firebase Database.

All the examples I found are just small translations like a greeting or How are you but what with complete websites? Is my best option making an JS object for each language and work with hundred of maybe thousand template strings? (That should definitely end up with tags like 'homepageContactSectionSubDiscription' or 'homepageProductSectionFeaturesItemTwo')

Answer 1

You should look into using react-intl. Github

You can specify various language files:

en.json

{
    "greeting": "Hello"
}

es.json

{
    "greeting": "Hola"
}

And then use them within your components using FormattedMessage:

import { FormattedMessage } from 'react-intl';
...
<FormattedMessage id="greeting" />

React intl provides a wrapper for your application to allow specifying different languages and their associated messages.

ReactDOM.render(
    <IntlProvider locale="en">
        <App />
    </IntlProvider>,
    document.getElementById('app')
);

An important note, this will not perform translations for you, but provide you with a method of pulling from different language files based on the specified locale.

If you find yourself having a very large language file, you can split it up into different sections. For example, I may have two files, home.json and settings.json, which I can set up to access as home.{unique_id} or settings.{another_unique_id}