Shared i18n setup for React application

npm install @smg-automotive/i18n-pkg

In your project (preferrably server-side) pass the translation files to the I18nProvider:

import type { AppProps } from 'next/app';
import { filterDictionaryScopes, I18nProvider } from '@smg-automotive/i18n-pkg';

import DeDictionary from './locales/de/dict.json';
import ItDictionary from './locales/it/dict.json';
import FrDictionary from './locales/fr/dict.json';
import EnDictionary from './locales/en/dict.json';

const dictionaries = {
  de:  DeDictionary,
  fr:  FrDictionary,
  it:  ItDictionary,
  en:  EnDictionary,
};

const MyApp = ({ Component, pageProps }: AppProps) => {
  return (
    <I18nProvider
      lngDict={filterDictionaryScopes({
        dictionaryScopes: pageProps.scopes,
        dictionaries: dictionaries,
        language: pageProps.lang,
      });}
      language={pageProps.lang}
      onMissingTranslation={(error: string) => {
        console.error(`Missing translation: ${error}`);
      }}
    >
      <Component {...pageProps} />
    </I18nProvider>
  );
};

export default MyApp;

To use the t function in the case above you need to specify before the key if the translation is common across MS24 and AS24 or specific to one universe.

i18n.t('specific.homeSearchForm.subtitle')

or

i18n.t('common.homeSearchForm.lastSearch')

In case you need a plural and a singular version for 1 translation:

In your JSON file:

"plural": {
            "cookies": {
                "zero": "We did not bake anything",
                "other": "We baked {{ count }} cookies",
                "one": "We baked a cookie"
            }
        }

In your component/page:

{i18n.t('index.plural', { count: 1 })}

• If count = 0, cookies.zero will be returned
• If count = 1, cookies.one will be returned
• If count > 2, cookies.other will be returned

In order to test the package, you should create the following folders and file: __ mocks __>@smg-automotive>i18n-pkg.tsx In the i18n-pkg.tsx:

export { useI18n, Trans } from '@smg-automotive/i18n-pkg/dist/__mocks__/index';

npm run build

You can link your local npm package to integrate it with any local project:

cd i18n-pkg
npm run build
cd email-templates
npm link ../i18n-pkg