Open
Description
- We'll use the external internationalization ("i18n") library react-i18next
- To get started, create a file
src/i18n/index.js
with an object mapping keys to EN and FR phrases like this:
const resources = {
en: {
translation: {
"welcomeDialogTitle": "Welcome to the MU Open-Air Museum"
}
},
fr: {
translation: {
"welcomeDialogTitle": "Bienvenue au musée de plein air MU"
}
}
};
- Inside of components with user-readable text, import the i18n hook like this:
import { useTranslation } from 'react-i18next';
function SomeComponent () {
const { t } = useTranslation();
return <div>{t("welcomeDialogTitle")}</div>
}