How to use Translation outside a React component?

[stephyswe]

Hi, I'm trying to add translation to a object that is outside a React Component, is this possible?

Current code

import React from 'react'
import { useTranslation } from 'react-i18next'
import { Dimmer, Loader, Segment, Item } from 'semantic-ui-react'
import i18next from 'i18next';

// Images
import BankidImage from '../../../assets/img/bankid-logo.png' // Images
import SwishImage from '../../../assets/img/swish.webp' // Images

const webdata = {
  bankid: {
    image: BankidImage,
    textStarted: i18next.t('DimmerBankid.text'),
    textComplete: i18next.t('DimmerBankid.complete')
  },
  swish: {
    image: SwishImage,
    textStarted:
      'Öppna Swish-appen för att slutföra transaktionen. Kontrollera belopp, mottagare och acceptera betalningen. Klart!',
    textComplete: 'Betalning är genomförd. Tack!'
  }
}

export function DimmerLoading({ active, type, action }) {
  return (
    <Dimmer active={active} inverted>
      <Loader inverted>
        <Segment>
          <Item.Group>
            <Item>
              <Item.Image size="tiny" src={webdata[type].image} />
              <Item.Content verticalAlign="middle">
                {action ? webdata[type].textComplete : webdata[type].textStarted}
              </Item.Content>
            </Item>
          </Item.Group>
        </Segment>
      </Loader>
    </Dimmer>
  )
}

[adrai]

#1042
#1232

[stephyswe]

I didnt understand, can you please give more detail

[adrai]

befire using the t function, i18next needs to have finished to initialize and be ready.
So you may move webdata inside DimmerLoading and use the useTranslation hook and wait for the ready property to be true.

[jamuhl]

Something like:

import i18n from '../../../i18n';

const data =  {};

function updateTranslations () {
    data.code =   i18n.t('key1');
    data.message =  i18n.t('key2');
}

// i18next seems ready -> initial fill translations
if (i18n.isInitialized) {
  updateTranslations();
}

// reset translations to new values on language change
i18next.on('languageChanged', function(lng) {
    updateTranslations();
});

// we loaded some translation file? reset needed?!?
// https://www.i18next.com/overview/api#store-events
i18next.on('loaded', function(lng) {
    updateTranslations();
});

export default data;

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Danielgomesp]

Just like that:

import i18n from `./i18n`

i18n.t(...);

[AndonMitev]

but if we have:

export const sec  = {
  title: t('test.text1'),
};

is not going to work, requires to be function, any solution for this so i can avoid converting it into fn:

export const sec1 = () => ({
  title: t('test.text1'),
});

[jamuhl]

@AndonMitev spamming 3 issues...but not able to search for relavant...idk...#1698 (comment)

[AndonMitev]

@AndonMitev spamming 3 issues...but not able to search for relavant...idk...#1698 (comment)

Thanks for replying, i have attached event listeners and it works! But there is another issue with loading files

using ths config:

import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-http-backend';
import { initReactI18next } from 'react-i18next';

if (!i18n.isInitialized) {
  i18n
    .use(Backend)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
     supportedLngs: ['en', 'ja'],
      fallbackLng: 'ja',
      debug: true,
      interpolation: {
        escapeValue: false,
      },
    });
}

export default i18n;

Throws:

1. i18next::backendConnector: loading namespace translation for language ja failed TypeError: Failed to parse URL from /locales/ja/translation.json and i can see it is there is in public folder and it loads

Also en and ja are there but goes to fallback ja? , Isn't this pluggin LanguageDetector responsible for detecting en automatically it should be en-GB explcitly

[jamuhl]

@AndonMitev https://www.i18next.com/principles/fallback#language-fallback is done depending on detected language...

failed parsed has nothing todo with i18next...must be a wrong file or invalid json