Setup i18n in the project

[alexgarel]

What

• We have to setup i18n in the react application in a way which is compatible with Crowdin.

Part of

• 30

[alexgarel]

@alexfauquette can you tell us, how it's setup in hungergames ?

[alexfauquette]

Of course

About crowding

You have a github action to keep it up to date here

You can copy past the folder structure (i18n folder) which contains common.json and after 1 file per locale

About React

I used reacti18n. You can have a look to the get started

Configuration

I've one file that do the initialization on the all app

It's called in the root index.js as follow

import "./i18n";

Using it

After that all your components can have translation as follow:

import { useTranslation } from "react-i18next";

const MyComponent = ()=>{
    const { t } = useTranslation();

    return <p>{t('myTrabslationKey')}</p>
}