0

I'm quite new to react and I'm searching the best way to detect when user change language. I'm using next translate to translate resources but for some ressource I'm getting from API, I need to change them manually. Here is the way I'm using default ressources:

On page:

const { t } = useTranslation("member");

That calls:

import { I18n } from '.';
export default function useTranslation(defaultNS?: string): I18n;

And here is the way language is changed into the picker component:

router.replace(router.asPath, undefined, { locale: locale/*, shallow: true*/ });

Here are things I've tried so far: I'm not into a component (it's a jsx page) so I think I cannot use

componentDidUpdate(prevProps, prevState) { if (this.props.t !== prevProps.t) { console.log(this.props.i18n.language); } }

It gives me a TypeError: Cannot read property 'props' of undefined

I've tried that too but it

import I18n from 'i18n';
i18next.on('languageChanged', function(lng) {})

Gives me TypeError: _next_translate_root_i18n__WEBPACK_IMPORTED_MODULE_0___default(...).on is not a function

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
clement
  • 4,204
  • 10
  • 65
  • 133
  • *i18n* != *i18next*. Which library are you using exactly? – Bergi May 08 '23 at 05:47
  • @Bergi : next-translate https://www.npmjs.com/package/next-translate – clement May 08 '23 at 11:11
  • Then I'm not sure from where you got `i18next.on('languageChanged', function(lng) {})`. – Bergi May 08 '23 at 16:26
  • Given that *next-translate* uses routing to set the language, you can detect changes to the language in the same way you detect changes to any routing parameter (in this case, `locale`). [The docs](https://github.com/aralroca/next-translate#11-how-to-save-the-user-defined-language) also show using an effect with the `useRouter` hook. – Bergi May 08 '23 at 16:29

1 Answers1

4
import { useEffect } from "react";
import { useRouter } from "next/router";
import { useTranslation } from "next-translate";

function MyPage() {
  const router = useRouter();
  const { t, i18n } = useTranslation();

  useEffect(() => {
    console.log(`Language changed to ${i18n.language}`);
    // Do something here when the language changes
  }, [i18n.language]);

  return <div>{t("hello")}</div>;
}

export default MyPage;

using the useEffect hook to listen for changes to the i18n.language property, which is automatically updated by next-translate when the user changes the language. When the language changes, the effect function is called and you can do something in response.

Note that you should include i18n.language in the dependency array of useEffect. This ensures that the effect function is called every time the language changes.

oluroyleseyler
  • 802
  • 2
  • 5