How to localise your ReactJS apps with i18next — but you're using Class Components

You want to localise your React Apps and add multiple language options to your app, but your app was built years ago when class components were still a thing. You've searched through tutorials to set up localisation on your app, but a lot of tutorials out there mostly explain in the context of functional components, and the React team said that there is no need to make the swap form class to functional components as it will never deprecate.

This article will cover the basics for adding multiple languages to your React app.

1. Install the relevant dependencies

npm install i18next react-i18next i18next-browser-languagedetector --save

2. Create a js file to store your translations

Let's call this file i18n.js. This will be where all the translations are stored

import i18n from "i18next";

i18n.init({
    resources : {
        en : {
            translations : {
                Dashboard_PageHeader_Title : "This is the title in english",
                Dashboard_PageHeader_Body : "This is the body in english"
            }
        },
        my : {
            translations : {
                Dashboard_PageHeader_Title : "Ini adalah tajuk dalam Bahasa Malaysia",
                Dashboard_PageHeader_Body : "Ini adalah perenggan bawah dalam Bahasa Malaysia"
            }
        }
    },
    fallbackLng: "en",
    debug: true,

    // have a common namespace used around the full app
    ns: ["translations"],
    defaultNS: "translations",

    keySeparator: false, // we use content as keys

    interpolation: {
        escapeValue: false, // not needed for react!!
        formatSeparator: ","
    },

    react: {
        wait: true
    }
})
export default i18n;

3. Import the i18n file and pass it as a prop to I18nextProvider and wrap the entire application with the provider component

// Import files at the top of your file
// Localisation module
import { I18nextProvider } from "react-i18next";
import i18n from "./i18n";

...

// in render
render() {
        const { authenticated, loading } = this.state;
        if (loading) return <div style={{ background: '#000080' }}><div className="loading-screen"></div></div>

        return (
            <HashRouter>
                <I18nextProvider i18n={i18n}>
                    <Switch>
                        <Route path="/login" render={(props) => <LoginPage />} />
                        <PrivateRoute path="/" component={RealDashboard} authenticated={authenticated} />
                    </Switch>
                </I18nextProvider>
            </HashRouter>
        )
    }

Now that we are done with setting up your app to have multiple language, we need to set up changing the language settings, and then extract the language as your content.

4. Change the language

You may have a dropdown, radio button or any kind of form for the user to change language. Wherever you choose to call the function to change language, you do so as the following :

// top of file
import { withTranslation } from 'react-i18next';

...

// update your language in your component
class HeaderLanguageSelect extends Component {
    state = { value : 'en' }

    updateLanguage = () => {
        let newlang = this.state.value;
        this.props.i18n.changeLanguage(newlang);
        this.props.toggleModal();
    }
    render(){
        return{ your code here }
    }
}

// export default your component run through withTranslation imported above
export default withTranslation()(HeaderLanguageSelect)

5. Displaying the language

This step is almost similar to step 4, but you call the t as props and refer to the key corresponing to the content defined in your i18n.js file.

// top of file
import { withTranslation } from 'react-i18next';

...

// update your language in your component
class Dashboard extends Component {
    render(){
        return(
            <div>{this.props.t('Dashboard_PageHeader_Body')}</div>
        )
    }
}

// export default your component run through withTranslation imported above
export default withTranslation()(Dashboard)