Use I18nextProvider with a components library

Question about react-i18next

Hello,

I have a question about the utilization of I18nextProvider.

Here is my code :

i18next
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        translation: {
          "Validate": "Validate"
        },
      },
      fr: {
        translation: {
          "Validate": "Valider"
        }
      },
      lng: "fr",
      fallbackLng: "fr",
      interpolation: {
        escapeValue: false
      }
    }
  });

i18next.changeLanguage('fr')

class App extends Component {
  render() {
    return (
     <I18nextProvider i18n={i18next}>
        <Toto/>
    </I18nextProvider>
    );
  }
}

export default App;

And my component Toto is :

class Toto extends Component {
  render() {
    const { t } = this.props;

    return (
      <p>{t('Validate')}</p>
    )
  }
}
const translatedToto = withTranslation()(Toto);
export { translatedToto as Toto };

If my Toto is in the same project that my component App it works well. But if my Toto component is in an external package, the translation doesn’t works and I have the following message in the console :

react-i18next:: You will need pass in an i18next instance by using i18nextReactModule

I am currently developing a components library so I use npm link to make the link between my components library and my test project.

So my question is the following : There is a particular way to use I18nextProvider in this specific case ? Generally, what is the best practice to use react-i18next with a components library ?

Thanks.

Damien

[bnbarak]

You can use <I18nextProvider /> to reference the same instance.

Here is my solution to refactoring the i18nInstance to a separate library (for a lerna monorepo for example)

// utils-lib.js lives outside of the front-end/app project
import { initReactI18next } from "react-i18next";

export const i18nInstance = i18n
  .use(otherThings)
  .use(initReactI18next);

  i18nInstance.init(generateI18nInitOptions(), error => {
    // handle your errors
  });

// App.tsx or App root
import { i18nInstance } from 'utils-lib';
const App = () => 
  <I18nextProvider i18n={i18nInstance}>
     <MyComp />
  </I18nextProvider>

import { useTranslation } from 'react-i18next';

const MyComp = () => {
  const { t, i18n } = useTranslation();
  return <div>{t('tag')}</div>  
}

[jamuhl]

you can transpile them…but exclude react from being included…there at anytime should be only one react instance…that’s all