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. The library dynamically fetches API keys environment variables.

Installation

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

Usage

Local Environment Setup Ensure the TOLGEE_API_KEY is set in your environment variable for local development. TOLGEE_API_KEY=your-tolgee-api-key

Basic Implementation

Import the AtlasIntlProvider and wrap your application:

import { AtlasIntlProvider } from '@globalsign/atlas-intl'; const App = () => ( );

Use the useTranslation hook to access translation functions which accepts namespace as its parameter: UseTranslation will accept namespace as its parameter and t will accept params, defaultValue and namespace.

import { useTranslation } from '@globalsign/atlas-intl'; const { t } = useTranslation('Namespace'); {t('testKey', 'params', 'defaultValue', 'ns')}

The FormattedMessage component is used to display localized messages and it accepts both strings and structured message objects. If a plain string is passed, it will be displayed as is.

The structured message object will have the following properties:

id: The translation key in your localization file. defaultMessage: The fallback message if the translation key is not found. params: A key-value object for dynamic parameters in the message. ns: The namespace to scope the translation key.

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

testTitle: { id: 'test.key', // Translation key in your localization file defaultMessage: 'default value', // Fallback message ns: "testNamespace", // namespace params: "", }, 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: ['Discovery', 'CertificateIssuance', 'AtlasPortal'], });

Language: Change the default language in the init configuration.

The .tolgeerc file specifies the Tolgee project ID and the paths to which translation key value pairs will be pushed and pulled.

Scripts

Clean: Remove the dist directory: yarn clean

Build: Transpile the source files: yarn build