import { useTranslate } from '@uhg-abyss/web/hooks/useTranslate';

Usage

interface I18nTranslate {
  t: (key: string, replacements?: object) => string;
  i18n: object;
}

useTranslate(key: string, replacements?: object): I18nTranslate

The key argument corresponds to the key in the i18n object. The replacements argument is an object that contains the value(s) to replace in the translated string.

Example

Let's use an example to illustrate how the useTranslate hook 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'.

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

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.

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

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 useTranslate hook 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.

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

Editable Example

Related links

• I18nProvider
• Translate