import { Translate } from '@uhg-abyss/web/ui/Translate';

Usage

The Translate component accepts a function with one parameter: an object with keys t and i18n.

• The t property is a function that is used to retrieve translated strings from the i18n object and supply values to the placeholders.
• The i18n property is the i18n object itself.

The t function takes two arguments:

t(key: string, replacements?: object): string

The key argument corresponds to the key in the i18n object. The replacements argument is an object that contains the values to replace in the translated string.

Example

Let's use an example to illustrate how the Translate component works. The Results component displays the currently visible results and the total number of results. We can get the value of this text with the key 'Results.multipleResults':

() => {
  return (
    <Translate>
      {({ t }) => <Text>{t('Results.multipleResults')}</Text>}
    </Translate>
  );
};

Editable Example

Notice the values in double curly braces ({{ }}). These are placeholder values. If we want to manually replace these, we can pass in the replacements object with the keys resultFrom, resultTo, and resultsTotalCount.

() => {
  return (
    <Translate>
      {({ t }) => (
        <Text>
          {t('Results.multipleResults', {
            resultFrom: 1,
            resultTo: 5,
            resultsTotalCount: 10,
          })}
        </Text>
      )}
    </Translate>
  );
};

Editable Example

Note: In regular usage of Abyss components, passing these replacements in manually is unnecessary. All components will automatically replace these placeholders with the correct values.

We can also use the Translate component to get the translated string from the i18n object. Note that this method does not provide a built-in way to supply values to the placeholders.

() => {
  return (
    <Translate>
      {({ i18n }) => <Text>{i18n.Results.multipleResults}</Text>}
    </Translate>
  );
};

Editable Example

Related links

• I18nProvider
• useTranslate

Translate Props

Prop Name	Type	Default	Description
children	() => React.ReactNode	-	Function used to access the i18n object and translation function