Argument of getFixedT is ignored about react-i18next HOT 12 CLOSED

I need to run it inside useEffect as I dont know what language to set it to in the initial load ... I get the fixed language from the server and then set it.

from react-i18next.

your fr language is not loaded therefore it shows fallback...(you have to assert it's loaded...)

add preload: ["fr"], to your init to preload it...https://www.i18next.com/overview/configuration-options#languages-namespaces-resources

from react-i18next.

Thanks @jamuhl Preloading in the init is not really convenient as I would have to preload all possible languages. My app is a client side app and will use two possible languages... one that comes from outside the users browser and the browser language. I cannot know before the app loads either of the two languages.

Is there a way to manually load a language? Or is my current work around (changing the language and back) the best way to getFixedT of an un-preloaded language. Cheers

from react-i18next.

https://www.i18next.com/overview/api#loadlanguages

and I guess you can use https://www.i18next.com/overview/api#hasresourcebundle to check for loaded (eg. building your own useTranslation for the different language)

or better use: #1637 which (@adrai) is currently not documented

from react-i18next.

fyi: the lng prop via useTranslation hook will not load the additional language, it will only return the "appropriate" t function bound to that language

from react-i18next.

@adrai @jamuhl
This seems to work. Is this what you meant?

if (!i18n.hasResourceBundle(lng, "translation")){
    i18n.loadLanguages(lng, (err: unknown) => {
        if (err instanceof Error) {
            console.error("Error loading language: " + err.message)
        } else {
            const newDocT = i18n.getFixedT(lng)
            //.... use newDocT
        }
    })
} else {
    const newDocT = i18n.getFixedT(lng)
    //.... use newDocT
}

The way I use it is by setting it to a state variable:
const [ myFixtT, setMyFixedT] = React.useState<TFunction | undefined>()
setMyFixedT(() => newDocT)

from react-i18next.

Did the useTranslation hook not work?

const { t } = useTranslation('trandlation', { lng })

from react-i18next.

Not sure I understand

fyi: the lng prop via useTranslation hook will not load the additional language, it will only return the "appropriate" t function >bound to that language

You said it would not load the language. I dont want to preload in the init. I just want a TFunction I can cache. This language is fixed and specified by external data, not by the user or the browser.

from react-i18next.

Seems I was wrong... it loads the language... can you try that?

from react-i18next.

I need to do this inside a React.useEffect... useTranslate is throwing an error because it is a Hook inside a Hook... Well that is what I think is happening.

from react-i18next.

useTranslation is a hook...no need to run it inside useEffect

from react-i18next.

I moved it into its own empty div rendering component so it could use the language as a property. useTranslation works there.
Thanks.

from react-i18next.