Skip to main content

Customizing Text

Front-end Framework uses the i18next library for internationalization and localization. This not only allows for easy translation of text in the application, but also for customization of the text itself via the use of custom translation keys.

How to customize text​

Inside of the template for your application, you can use the i18nOptions property to configure the i18next library. This property is passed to the i18next.init method, which initializes the i18next library with the specified options. See i18next's documentation for details.

For Front-end Framework, you can use the resources property to specify text to be used in the application. We provide a loadDefaultTranslations method that loads our provided default translations for the application:

{
  ...
  i18nOptions: {
    resources: loadDefaultTranslations(),
  }
}

You can then override the default translations by specifying your own translations to join with this list of translations:

import { merge } from 'lodash';
import { loadDefaultTranslations } from '@basaldev/blocks-frontend-framework';

{
  ...
  i18nOptions: {
    resources: merge(loadDefaultTranslations(), {
      ja: {
        keyToOverride: 'My custom translation text'
      }
    }),
  }
}

Managing your translations​

Translating text in code can be cumbersome, so we recommend using a translation file, specified in yaml, to manage your overridden translations:

ja:
  keyToOverride1: 'My custom translation text 1'
  objectToOverride:
    key1: 'My custom translation text 2'
    key2: 'My custom translation text 3'

You can then import this file as well:

import { merge } from 'lodash';
import { loadDefaultTranslations, loadTranslationsFromYaml } from '@basaldev/blocks-frontend-framework';
import translationOverrides from './overrides.yaml';

{
  ...
  i18nOptions: {
    resources: merge(loadDefaultTranslations(), loadTranslationsFromYaml(translationOverrides)),
  }
}

Translation file format​

caution

Front-end Framework does not currently have a fixed yaml format for translation files.

In the future, we plan to organize translations in a more structured method, to make the resulting translation files more readable and maintainable by matching them to the structure of the application. Please contact us if you have any feedback or suggestions.