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

Usage

Abyss supports overriding the default i18n object by using the I18nProvider component. I18nProvider accepts a single prop, translations, which is an object containing the translation overrides. 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 components. The componentName key with an object value is for strings within specific Abyss components that allow an additional scope to other keys. Below is an example of a few of the strings in our default i18n object:

{
  // ...
  openInNewWindow: 'opens in a new window',
  save: 'Save',
  search: 'Search',
  // ...
  DataTable: {
    actionDropdown: {
      actions: {
        sortAscending: 'Sort by {{columnName}} ascending',
        sortDescending: 'Sort by {{columnName}} descending',
        clearSort: 'Clear sort',
        clearFilter: 'Clear filter',
        groupBy: 'Group by',
        ungroupBy: 'Ungroup by',
        hideColumn: 'Hide {{columnName}} column',
        showAllColumns: 'Show all columns',
      },
      label: 'Actions dropdown',
    },
    // ...
  },
  // ...
  NumberInput: {
    aria: {
      decrementButton: {
        label: 'decrement by {{stepValue}}',
      },
      incrementButton: {
        label: 'increment by {{stepValue}}',
      },
    },
  },
  // ...
}

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

Our default i18n object contains all strings used in Abyss components.

Example

Let's use the Results component as an example. This component displays the currently visible results and the total number of results.

Internally, we use the following keys to read the values from our i18n object:

• Results.multipleResults
• Results.singleResult
• Results.noResults

These values can be overridden with the translations prop in the I18nProvider component. Let's change the values so that the component mentions "records" instead of "results".

Language translations

We can use the same idea to translate text into different languages—in this case, German:

Custom i18n

Besides overriding the default values used in Abyss components, the I18nProvider can also be used to provide custom text values. These values can then be consumed later using the useTranslate hook or the Translate component in the same manner as before.

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