Search code examples
i18nextreact-i18next

I18nextProvider fallback to second default namespace

I have 2 components A and B with their own translation files, and a shared translation file that should be used as a fallback. How to get it to work with I18nextProvider?

Note that there is already a separate fallback translation file defined fallbackNS: 'common' and I do not want to add the shared file there, it must only be shared between these 2 components.

I tried this:

<I18nextProvider i18n={i18n} defaultNS={['A', 'shared']}>
  <A />
</I18nextProvider>

<I18nextProvider i18n={i18n} defaultNS={['B', 'shared']}>
  <B />
</I18nextProvider>

But it would always try to get the translation from the namespace in the first element in the array.

I don't understand what's the point of allowing array as an argument in this case? When would any other than the first element be used in localization?

Solution

  • Figures I find the answer as soon as I speak it out in public...

    const {t} = useTranslation(undefined, {nsMode: 'fallback'});

    Basically nsMode has to be fallback. Now just to figure out how to make it the default.

    EDIT: to set default:

    react: {
  nsMode: 'fallback'
}