I have the following i18n setup on my react
import i18n from 'i18next'
import LanguageDetector from 'i18next-browser-languagedetector'
import {initReactI18next} from 'react-i18next'
import Backend from 'i18next-http-backend';
i18n
.use(initReactI18next)
.use(LanguageDetector)
.use(Backend)
.init({
backend: {
loadPath: `test.com`,
},
react: {
useSuspense: false
},
whitelist: ['en', 'fr', 'es'],
fallbackLng: ['en'],
detection: {
order: ['cookie', 'navigator'],
lookupCookie: 'i18nextLng',
caches: ['cookie'],
cookieOptions: { path: '/', sameSite: 'strict' },
checkWhitelist: true
}
})
export default i18n
I have a unique product with some information as price I would like to use as defaultVariables
Reading the doc I can change the inti config adding
{
interpolation: {
defaultVariables: {price: 100}
}
}
and then {{price}} should be available on all my translations
This part is working great.
But I am getting the product from a server call and I can not find any way to update the defaultVariables once i18n has been initialized
Officially, the only way to have defaultVariables injected is via init function.
This means you have to load those values before calling init(), and then pass them via init options.
But....
you can try to do this:
i18next.services.interpolator.options.interpolation.defaultVariables = { price: 100 }
This may work, but this is for sure unsupported and not recommended.
btw: the whitelist option was replaced with supportedLngs: https://www.i18next.com/misc/migration-guide#removed-deprecated
Related
I am working on a project with Laravel/React. I am loading the translations from Laravel using kirschbaum-development/laravel-translations-loader and i18n. When I programmatically add a new translation string in the lnguage files it doesn't load it until I reload the current page including the browser cache. Is there a possibility to reload the languageBundle without page reload?
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import languageBundle from '#kirschbaum-development/laravel-translations-loader!#kirschbaum-development/laravel-translations-loader';
i18n
// detect user language
// learn more: https://github.com/i18next/i18next-browser-languageDetector
.use(LanguageDetector)
// pass the i18n instance to react-i18next.
.use(initReactI18next)
// init i18next
// for all options read: https://www.i18next.com/overview/configuration-options
.init({
debug: true,
lng: "ro",
fallbackLng: 'en',
resources: {
//de refacut dinamic
bg: {
translation: languageBundle.bg
},
de: {
translation: languageBundle.de
},
en: {
translation: languageBundle.en
},
es: {
translation: languageBundle.es
},
fr: {
translation: languageBundle.fr
},
hu: {
translation: languageBundle.hu
},
ro: {
translation: languageBundle.ro
},
},
supportedLngs: ['bg', 'de', 'en', 'es', 'fr', 'hu', 'ro'],
// backend: {
// loadPath: 'lang/{lng}/{ns}.php'
// },
// react: {
// wait: false,
// bindI18n: 'languageChanged loaded',
// bindStore: 'added removed',
// nsMode: 'default'
// },
});
export default i18n;
Created i18n.js file as it is said in documentary , and inserted in the file the following code
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
const languages = ["en", "es", "ar"]
const options = {
order: [ 'localStorage', 'cookie', 'querystring', , 'sessionStorage', 'navigator', 'htmlTag', 'path', 'subdomain'],
lookupQuerystring: 'lng',
lookupCookie: 'i18next',
lookupLocalStorage: 'i18nextLng',
lookupSessionStorage: 'i18nextLng',
lookupFromPathIndex: 0,
lookupFromSubdomainIndex: 0,
caches: ['localStorage', 'cookie'],
excludeCacheFor: ['cimode'],
cookieMinutes: 10,
cookieDomain: 'myDomain',
htmlTag: document.documentElement,
cookieOptions: { path: '/', sameSite: 'strict' }
}
i18n
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
fallbackLng: 'en',
lng: 'en',
debug: true,
whitelist: languages,
detection: options,
interpolation: {
escapeValue: false,
}
});
export default i18n;
then imported above mentioned file in App component,
After refreshing the already translated pages, the components are disappearing, but when i am comment i18n.js imported file in my App component out everything is working
Please check the browsers console, probably you will find an answer there.
From a quick look at your code, it seems that your options object has a type error inside order array, an extra comma.
..., 'querystring', , 'sessionStorage', ...
I would suggest to use eslint so you can find and fix this issues in your IDE.
i18n default language is english or en how can i change it from configuration?
here is my configuration
import i18n from "i18next";
import Backend from "i18next-xhr-backend";
import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";
const fallbackLng = ["nl"];
const availableLanguages = ["nl", "en"];
i18n
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
fallbackLng,
debug: false,
whitelist: availableLanguages,
interpolation: {
escapeValue: false,
},
});
export default i18n;
i18next Configuration Options suggests to use lng option to override language detection in this way:
i18n
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
lng: 'nl',
debug: false,
whitelist: availableLanguages,
interpolation: {
escapeValue: false,
},
});
This should solve your problem.
I am trying to load multiple translation files to react app.
So far, I've been able to seperate the files
was having issues with it trying to append the name of two different translations file -- /locales/{{lng}}/{{ns}}.json?lng=en+es&ns=translation1+translation2)
I have solved this but now it will not read from the public folder
my config file looks like the following
import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import Http from 'i18next-http-backend'
import { initReactI18next } from 'react-i18next'
import BackendAdapter from 'i18next-multiload-backend-adapter'
const languages = ['en', 'es']
i18n
.use(Backend)
.use(initReactI18next)
.init({
defaultNS: 'menus',
fallbackLng: 'en',
debug: true,
whitelist: languages,
lng: 'en',
backend: {
backends:[
new BackEndAdapter(null, {
backend: new Http(null,{
loadPath: `${process.env.PUBLIC_URL}/locales/{{lng}}/{{ns}}.json?lng={{lng}}&{{ns}}`,
addPath: `${process.env.PUBLIC_URL}/locales/add/{{lng}}/{{ns}}`,
allowMultiLoading: true
})
})
]
},
interpolation: {
escapeValue: false
}
})
export default i18n
package.json
{
"i18next": "^19.5.1",
"i18next-http-backend": "^1.0.15",
"i18next-multiload-backend-adapter": "^1.0.0"
}
using this as reference as to why multiload adapter is needed
It should look like this:
import i18n from 'i18next';
import HttpBackend from 'i18next-http-backend';
import { initReactI18next } from 'react-i18next';
const languages = ['en', 'es'];
i18n
.use(HttpBackend)
.use(initReactI18next)
.init({
defaultNS: 'menus',
fallbackLng: 'en',
debug: true,
whitelist: languages,
lng: 'en',
backend: {
loadPath: `${process.env.PUBLIC_URL}/locales/{{lng}}/{{ns}}.json?lng={{lng}}&{{ns}}`,
addPath: `${process.env.PUBLIC_URL}/locales/add/{{lng}}/{{ns}}`,
},
interpolation: {
escapeValue: false,
},
});
export default i18n;
I'm trying to give user an option to specify language of generated receipt while keeping the language of the app the same. How would I change the language only for receipt component? i18n.changeLanguage does it globally.
If it helps, here is my i18n config:
i18n
.use(Backend)
.use(initReactI18next)
.init({
ns: ["translation", "login", "orders", "products", "invoices"],
defaultNS: "translation",
lng: "sl",
fallbackLng: "en",
debug: process.env.NODE_ENV === "development",
interpolation: {
escapeValue: false,
},
react: {
useSuspense: true,
wait: true,
},
});
You can use the getFixedT method to get translations of a particular object in a given language regardless of the global language. Here is an example:
en.json
{
nested: {
object: {
...
}
}
}
App.jsx
import { getFixedT } from "i18next";
const App = () => {
const fixedT = getFixedT("en");
const templateData = fixedT("nested.object", {
returnObjects: true,
});
}
References
i18next official documentation: getFixedT