How to use react-i18next in a utility function outside the component tree?

Question

I followed the react-i18next docs and internationalized my React app.

I use the useTranslation hook, which gives me the "t" object. All nice and smooth for now, but I have some non-Hook utility functions which are outside the component tree.

How to get access to the translation object there?

Arrack

Answer 1

This seems to work, import i18next rather than react-i18next:

// import { useTranslation } from "react-i18next";
import i18next from "i18next";
function hello() {
    return i18next.t("hello");
}

Kalk

Answer 2

This one worked for me,

//import i18next

import i18next from 'i18next';

//Then where ever you need to try like this

i18next.t('common:messages.errorMessage')

Philippine

This worked for me, although I needed to change the i18n config by adding the "ns" and "defaultNs" properties. Also, a common mistake is that the JSON file is "broken", meaning that you had a key-value pair where the value contains quotes, make sure you put "\" before each quote. – Communicable

Answer 3

A few steps that worked for me in a similar situation:

1. in i18n.ts file:

i18n.use(initReactI18next).init({ ns: "en", ......

2. in non-Hook utility function:

import i18next from "i18next";

import en from "../assets/locales/en.json";

i18next.addResourceBundle("en", "en", en);

const { t } = i18next;

t("some.test.key");

Hamlet

Answer 4

Not sure if it will work, but can you try this:

import i18n from "react-i18next";

// Then where ever you need try to this

i18n.t("target")

Ceremony

@PaulRazvanBerg , what about to set i18n.t function to a Static property of Class or something, and then reach that i18n.t function statically from outside component – Ceremony