Internationalization (i18n) in App Client

The App Client now provides built-in support for handling internationalization (i18n) in your micro-frontend applications. This feature allows your application to react to locale changes initiated by the shell application, enabling seamless language switching across your entire micro-frontend ecosystem.

Features

• Access the current locale
• Subscribe to locale changes
• React to locale changes in your components

Usage

Accessing the Current Locale

You can access the current locale using the useAppClient hook:

import { useAppClient } from '@akinon/app-client';
import { useTranslation } from 'react-i18next';
import { useEffect } from 'react';
function MyComponent() {
  const { locale, onLocaleChange } = useAppClient();
  const { i18n } = useTranslation();
  useEffect(() => {
    // Set initial locale
    i18n.changeLanguage(locale);
    // Subscribe to locale changes
    const unsubscribe = onLocaleChange(newLocale => {
      i18n.changeLanguage(newLocale);
    });
    return unsubscribe;
  }, [locale, onLocaleChange, i18n]);
  // ... rest of your component
}

Returns

• apps: RegisteredApp[]
• navigate: (payload: ApplicationNavigationPayload) => void
• updateLocale: (newLocale: string) => void
• … (other context values)

Best Practices

1. Initialize Early: Set up your locale management logic early in your application lifecycle, preferably in a top-level component.

2. Unsubscribe on Unmount: Always remember to unsubscribe from locale changes when your component unmounts to prevent memory leaks.

3. Minimize Re-renders: When possible, handle locale changes at a high level in your component tree to minimize unnecessary re-renders.

4. Fallback Locale: Always have a fallback locale in case the received locale is not supported in your application.

5. Lazy Loading Translations: Consider lazy loading your translations based on the current locale to improve performance, especially if you support many languages.

Considerations

• The initial locale is set to ‘en’ by default. Make sure to handle cases where the initial locale might be different.
• The locale change is triggered by the shell application. Your client application should be prepared to handle locale changes at any time.
• Ensure that your application gracefully handles scenarios where a locale change might occur during user interaction or data loading.