I have developed a multi language application with VueJS.
I have installed the vue-i18n package. So it seams that you have an equivalent for React.
Then I have created languages folder inside the js folder.
Inside the languages folder, I have several files with all translations.
For example.
// js/languages/dashboard.js
export default {
en: {
filter: 'Filter',
filters: 'Filters',
search: 'Search',
},
fr: {
filter: 'Filtrer',
filters: 'Filtres',
search: 'Rechercher',
},
}
I call these files via the index.js file.
// js/languages/index.js
import dashboard from './dashboard.js';
const languages = {
en: {
dashboard: dashboard.en,
...
},
fr: {
dashboard: dashboard.fr,
...
}
};
export default languages;
And I load the translations in the app.js file.
import { createI18n } from 'vue-i18n';
import languages from './languages';
let locale = localStorage.getItem('locale');
if (!locale) {
localStorage.setItem('locale', 'fr');
locale = 'fr';
}
const i18n = createI18n({
locale: locale,
fallbackLocale: 'fr',
messages: languages,
});
And I switch from one language to another via this simple component.
<template>
<form>
<select class="hidden sm:block outline-none appearence-none rounded px-2 py-1 text-yggdra-dark" id="language" v-model="$i18n.locale">
<option value="en">{{ $t('language.english') }}</option>
<option value="fr">{{ $t('language.french') }}</option>
</select>
<select class="sm:hidden outline-none appearence-none rounded px-2 py-1 text-yggdra-dark" id="language_short" v-model="$i18n.locale">
<option value="en">{{ $t('language.english_short') }}</option>
<option value="fr">{{ $t('language.french_short') }}</option>
</select>
</form>
</template>
<script setup>
</script>
You should be able to do something similar with React.