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

The useTranslate hook is used to get the translated string from the Abyss i18n object..

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 values to replace in the translated string.

Let's use an example to illustrate how to use the useTranslate hook. In the TextArea component, we have a text block that displays the remaining characters available to be typed in the text area. We can get that value with the key TextArea.charactersRemaining.

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

Editable Example

If we want to replace the value of the remaining characters, we can pass in the replacements object with the key count. Replacement values should always appear in double curly braces, (e.g. {{count}}).

() => {
  const { t } = useTranslate();
  return <Text>{t('TextArea.charactersRemaining', { count: 10 })}</Text>;
};

Editable Example

We can also use the useTranslate hook to get the translated string from the i18n object.

() => {
  const { i18n } = useTranslate();
  return <Text>{i18n.TextArea.charactersRemaining}</Text>;
};

Editable Example