Override current language with useTranslation

I’m not sure if there’s currently a way to do this but it would be interesting if there was a way to override the language set as a useTranslate option.

For an example, const [ translateToEnglish ] = useTranslate("reports", { lng: 'en'}).

It would load the reports namespace in english, and that t function would always translate to english, rather than the browser’s language (in the case you are using a language detector).

[stukennedy]

You can achieve this by cloning the instance of i18next and feeding it to a provider that encapsulates the components you want to treat differently. I had a similar use-case; a site running in one language, and a component that the user can switch the language on independently of the site. This approach worked excellently for me, where i18n is a module that creates the instance of i18next.

import React, { useEffect, useState } from 'react';
import { I18nextProvider } from 'react-i18next';

import i18n from './i18n';
import TranslateMe from './TranslateMe';

const Wrapper = () => {
  const [i18next, seti18next] = useState(i18n.cloneInstance());

  useEffect(() => {
    const instance = i18n.cloneInstance();
    seti18next(instance);
  }, []);

  return (
    <I18nextProvider i18n={i18next}>
      <TranslateMe />
    </I18nextProvider>
  );
};
export default Wrapper;

import React from 'react';
import { useTranslation } from 'react-i18next';

const TranslateMe = () => {
  const { t, i18n } = useTranslation();

  const onChangeValue = (event) => {
    i18n.changeLanguage(event.target.value);
  }

  return (
    <>
      <h1>{t('my-translation-key')}</h1>
      <div onChange={onChangeValue}>
        <input type="radio" value="en-GB" name="languageType" /> English
        <input type="radio" value="fr-FR" name="languageType" /> French
        <input type="radio" value="nl-NL" name="languageType" /> Dutch
      </div>
    </>
  );
};
export default TranslateMe;

[bitttttten]

I wanted to piggy back on this since I have a use case that I don’t think I can solve with the above links. We have a language switcher, were we always want to display the users language rather than the site’s language so we’d like to force a language with useTranslation to display the user’s language.

For example, on the Asos website you can visit the German website for ASOS, and if you visit whilst being in The Netherlands you get presented with a message in Dutch:

Right now I am just importing the raw language file and bypassing this library but it would be great to have it supported.