how to access to t() from react-i18next

[alainib]

Hello.

I work on a package who export multiple ReactJs components. Let's call it "utilityPackage".

This package doesn't have ReactDOM.render( <App />, document.getElementById("root")); so i cannot find a way to init react-i18next.

So in each component i need to translate some texts i pass t as argument.

// utilityPackage/componentA.js
export function HelloWord(t){
 return <div>{t("BONJOUR")}</div>
}

In the projets who import utilityPackage i have something like this :

import {componentA} from "utilityPackage";
import {useTranslation} from "react-i18next";

export function Test(){
  const {t} = useTranslation();
  return ( <HelloWord t={t} /> )  
}

I use utilityPackage also in docusaurus but i cannot find a way to access i18n t function.

Is there a way to init initReactI18next and use useTranslation hooks in docusaurus ?

thanks

[slorber]

You assume that we know anything about react-i18next here which is not the case.

What I understand is that you need to init first before usage, so you need a way to run some code before React renders.

My intuition is that you could init some globals with config.clientModules or by swizzling the <Root> theme component.

I'd suggest adding <I18nextProvider> in <Root>

[alainib]

yes sorry my bad .

This is a working solution for me to use react-i18next with docusaurus

src/locales/initialise18n.js

import i18n from "i18next";
import {initReactI18next} from "react-i18next";
import {frLocale, enLocale} from 'myOtherPackage';


export default function i18nInitialize() {
  i18n
    .use(initReactI18next)
    .init({
       resources: {
        en: enLocale, fr: frLocale
      },
      lng: "fr", 
      fallbackLng: "fr",
      debug: true,
      interpolation: {
        escapeValue: false
      }
    });
  return i18n;
}

a test component inside doc

import React from 'react';
import {ThumbWithFullScreen} from '@myOtherPackage';

import {useTranslation} from "react-i18next";
import i18nInitialize from "@site/src/locales/i18nInitialize"

i18nInitialize();


export default function ThumbWithFullScreenExample() {
  const {t} = useTranslation();
  return (
      <ThumbWithFullScreen t={t} imageUrl={url} backgroundColor={"grey"} />
  )
}