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

Usage

Abyss supports overriding the default i18n object by using the I18nProvider component. The I18nProvider component takes a translations prop that is an object containing the translations to either override the default translations with or to provide custom translations. The translations object for overrides will be in the following format:

{
  [commonWord]: 'Translated Value',
  [componentName]: {
    [key]: 'Translated Value',
  },
}

THe commonWord key is used to override the default translations for common words used in Abyss component. The componentName key with an object is for words within specific Abyss components that allow an additional scope to other keys. Below is an example of a few of the words in our default i18n object:

{
  disabled: 'Disabled',
  submit: 'Submit',
  TextArea: {
    clear: 'clear',
    charactersRemaining: '{{count}} characters remaining',
  },
}

When using the t function from the useTranslate hook or the Translate component, the key will be in dotted notation. For example, the key 'TextArea.clear' will be used to get the value 'clear' from the i18n object.

Our default i18n object can be seen here

Example

Let's use the TextArea component as an example. The TextArea component has a text block that displays the remaining characters available to be typed in the text area when the maxLength prop is used.

Internally, we use the 'TextArea.charactersRemaining' key to get value in our i18n object. This value can be overridden with the translations prop in the I18nProvider component. Let's change the value of the 'TextArea.charactersRemaining' key to place the amount of characters left at the end of the string.

() => {
  const [value, setValue] = useState('State Default Value');

  return (
    <I18nProvider
      translations={{
        TextArea: { charactersRemaining: 'Characters Remaining: {{count}}' },
      }}
    >
      <TextArea
        label="Label"
        value={value}
        onChangeText={setValue}
        maxLength={500}
      />
    </I18nProvider>
  );
};

Editable Example

Language Translations

We can use the same idea to translate text into different languages.

Custom I18n

You can also use the I18nProvider component to not only override the default values used in Abyss components, but you provide your own custom custom values . Those values can then consumed later using the useTranslate hook or the Translate component.

Related Links

• useTranslate
• Translate

I18nProvider Props

Prop Name	Type	Default	Description
children	React.ReactNode	-	The rest of the component tree
translations	object	-	The translations to override the default translations with