Usage

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

Usage

The Translate component can use a function as a child which passes an object with the t and i18n properties. The t property is a function that is used to get the translated string from the i18n object. The i18n property is the i18n object.

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 to use the Translate component. 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.

<Translate>
  {({ t }) => <Text>{t('TextArea.charactersRemaining')}</Text>}
</Translate>

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}}).

<Translate>
  {({ t }) => <Text>{t('TextArea.charactersRemaining', { count: 10 })}</Text>}
</Translate>

Editable Example

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

<Translate>
  {({ i18n }) => <Text>{i18n.TextArea.charactersRemaining}</Text>}
</Translate>

Editable Example

Translate Props

Prop Name	Type	Default	Description
children	React.ReactNode | () => React.ReactNode	-