atlas-intl-1 v2.0.3

Overview

The atlas-intl repository provides internationalization support for the Atlas application. It leverages Tolgee for translation management and integrates with React applications to enable dynamic translations.

Installation

To add atlas-intl to your project, install it using yarn: yarn add @globalsign/atlas-intl

Basic Implementation

AtlasIntlProvider

Wrap your application with the AtlasIntlProvider component to set up internationalization:

import { AtlasIntlProvider } from '@globalsign/atlas-intl';

const App = () => (
  <AtlasIntlProvider
    language="en-US"
    availableLanguages={['en-US', 'fr-FR']}
    namespaces={['common', 'dashboard']}
    staticTranslations={{
      'en-US': { common: { welcome: 'Welcome!' } },
      'fr-FR': { common: { welcome: 'Bienvenue!' } },
    }}
    prefix="/translations"
  >
    <YourMainComponent />
  </AtlasIntlProvider>
);

Parameters:

language: The default language (e.g., 'en-US'). availableLanguages: An array of supported languages. namespaces: A list of namespaces for grouping translations. staticTranslations: (Optional) Preloaded translations for static data. prefix: (Optional) URL prefix for fetching translations dynamically. Plugins: (Optional) Array of additional Tolgee plugins.

useTranslation

Use the useTranslation hook to access translation functions. This hook accepts a default namespace and returns:

t: A function for translating keys dynamically. T: A React component for translations with support for parameters. Example:

import { useTranslation } from '@globalsign/atlas-intl';

const MyComponent = () => {
  const { t, T } = useTranslation('common');

  return (
    <div>
      <h1>{t('welcome', { name: 'John' }, 'Hello!', 'common')}</h1>
      <T keyName="welcome" params={{ name: 'John' }} />
    </div>
  );
};

FormattedMessage

The FormattedMessage component is used to display localized messages. It supports both string keys and structured message objects.

Structured Message Object:

id: Translation key. defaultMessage: Fallback message if the key is not found. params: A key-value object for dynamic parameters. ns: (Optional) Namespace for the translation key. Example:

import { FormattedMessage } from '@globalsign/atlas-intl';

const messages = {
  testTitle: {
    id: 'test.key',
    defaultMessage: 'Default Value',
    ns: 'testNamespace',
    params: { user: 'Alice' },
  },
};

const MyComponent = () => <FormattedMessage message={messages.testTitle} />;

Customization

Namespaces: Add or modify namespaces as needed in the AtlasIntlProvider which will be pulled when tolgee is initialised:

.init({
ns: ['namespace1', 'namespace2'],
});

Language: Change the default language in the init configuration.

Scripts

Clean: Remove the dist directory: yarn clean

Build: Transpile the source files: yarn build