0

I have two repositories. One with nextjs application and second one with components that are being dynamically loaded into the first repo.

Since some of the components in second repo contain translations, I need to pass down a t function or an i18n instance (translation files and next-i18next initialisation are in the first repo).

I tried to pass it using context provider, but that didn't work:

TypeError: Cannot read property 'translator' of undefined

Is there any recommended way how to achieve this?

Vojtěch Václav Porteš
  • 1
  • 2

1 Answers1

0

Since at runtime your components sharing the same React "tree", there are many ways to achieve your requirement:

  1. passing the t method itself - creates a couple between your component and it's environment.
<InnerComponent t={t} />
  1. passing an already translated text to the component - your component may remain "general" purpose. but sometimes large components may require many texts, will cause a large amount of props.
<InnerComponent title={t('MY_TITLE')} />

There are cons & pros for each method, decide what is suites your requirements.

felixmosh
  • 32,615
  • 9
  • 69
  • 88