I want to use react-i18next in my project, and I want to config the i18 settings with the data fetched from server , so it's an async function.
the first senario came to my mind is using this:
useEffect(() => {
console.log("i18n_useEffect", i18n);
setTimeout(function() {
console.log(
"fetch data from server,and then reset i18n.js configuration"
);
const configurationFromServer = {...};
localStorage.setItem("i18n_configuration",configurationFromServer)
seti18nLoaded(true);
}, 3000);
},[]);
seti18nLoaded && <Componenrts/>
first , we fetch the configuration data from server , and once it's done, we can diaplay our and use i18n inside.
but it doesn't look right, because if the configuration api failed or before I got the data. I want to give a default setting first , and update it later.
like this:
import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";
const init_i18n = configFromServer => {
i18n
.use(LanguageDetector)
.use(initReactI18next)
.init(configFromServer);
};
const defaultConfig = {
// we init with resources
resources: {},
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
}
};
const configFromServer = {
// we init with resources
resources: {
en: {
translations: {
Hello: "Hello",
welcome: "welcome",
"Use string as key": "Use string as key"
}
},
de: {
translations: {
"Use string as key": "Use string as key_de",
Hello: "Hello_de",
welcome: "welcome_de"
}
}
},
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
}
};
const initialize = () => {
i18n
.use(LanguageDetector)
.use(initReactI18next)
.init(defaultConfig);
setTimeout(() => {
console.log("fetch data from server");
//I want update the configuration here.but not work.
init_i18n(configFromServer);
}, 2000);
};
initialize();
export default i18n;
so the idea is that we use the default configuration to initialize it once and then update it based on the data we pull from the server
and I will use below way , because I want it default display english text before i18next configuration loaded from server or fetched failed.
I'm not sure if my idea is the right way to do this. I also taked a look at i18next-xhr-backend, it looks config the api path within the init function, but it's hard to understood, it will be help full if some one can give a example for the usage of i18next-xhr-backend.
anyway, I have a online demo here to explain it more clearly: https://codesandbox.io/s/react-i18next-gpzyc
and I have a fack api to test the configuration: https://my-json-server.typicode.com/jjzjx118/demo/db
it returns:
{
"en": {
"translations": {
"Hello": "Hello",
"welcome": "welcome",
"Use string as key": "Use string as key"
}
},
"de": {
"translations": {
"Use string as key": "Use string as key_de",
"Hello": "Hello_de",
"welcome": "welcome_de"
}
}
}
thanks you .