I18n
Translations for EUI components can be provided globally in an application via
EuiContext, documented below. All availabletokens —also usually called ids— can be found in this automatically generated JSON file.
While developing an EUI component, any text that is included by default must be translatable. EuiI18n is the proper way to do this. Examples of such text are the aria-label in the clear button of EuiComboBox, or the visible text in EuiPagination compressed e.g. "1 of 24".
These utilities are mostly internal
The purpose of these utilities is to allow internationalizing EUI components. This is not a full-fledged solution for internationalizing your app.
Internalization
useEuiI18n and EuiI18n allows localizing string and numeric values for internationalization. There are two provided ways to use this: a React hook and a render prop component. In their simplest form, these take a token and a default value. token provides a reference to use when mapping to a localized value and default provides the untranslated value when no mapping is available.
Interpolation
useEuiI18n and EuiI18n support variable interpolation. In a translation like Signed in as {name} ({email}), two values can be interpolated (name and email). These values can be specified by passing a values prop to EuiI18n, or by passing an object of values as the third argument to useEuiI18n. Interpolation values can be passed as a string, number, or a React Component.
Using localized values in attributes
Some times a localized value is needed for a prop instead of rendering directly to the DOM. In these cases useEuiI18n can be called inline, or EuiI18n can be used as a render prop child which is called with the localized value.
Multi-value lookup
If many localized values are needed in a small area, multiple tokens can be retrieved from the hook or via a single render prop. In this case the token/default props are replaced by the pluralized tokens/defaults. Value injection is not supported when processing more than one token.
Number localization
EuiI18nNumber can be used to format one or more numbers. Similarly to EuiI18n, it takes value or values and can render directly to the DOM or call a render prop.
Context
EuiContext allows setting global internationalization copy for EUI components. Any components used within this context will lookup their display values from this mapping.
Props
EuiI18n
Prop | Description and type | Default value |
|---|---|---|
Prop default# | Description and type Type: Renderable<T> | Default value |
Prop token# | Description and type Type: string | Default value |
Prop tokens# | Description and type Type: string[] | Default value |
Prop defaults# | Description and type Type: any[] | Default value |
Prop children# | Description and type Render function that returns a ReactElement ((x: DEFAULTS[number][]) => ReactNode) | ((x: ResolvedType<DEFAULT>) => ReactNode) | Default value |
Prop values# | Description and type Type: {} | Record<string, ReactNode> | Default value |